Corex · Elixir Phoenix Framework UI Library

Preview

Subtle (default)

    <.pin_input count={4} class="pin-input" value={["1", "2", "", ""]}>
  <:label>Subtle (default)</:label>
</.pin_input>

Semantic

Use class="ui-{role}" to set the semantic palette of a pin input.

Available options: accent, alert, brand, info, success

Default

Accent

Brand

Alert

Info

Success

    <.pin_input count={4} class="pin-input" value={["1", "2", "", ""]}>
  <:label>Default</:label>
</.pin_input>
<.pin_input count={4} class="pin-input ui-accent" value={["1", "2", "", ""]}>
  <:label>Accent</:label>
</.pin_input>
<.pin_input count={4} class="pin-input ui-brand" value={["1", "2", "", ""]}>
  <:label>Brand</:label>
</.pin_input>
<.pin_input count={4} class="pin-input ui-alert" value={["1", "2", "", ""]}>
  <:label>Alert</:label>
</.pin_input>
<.pin_input count={4} class="pin-input ui-info" value={["1", "2", "", ""]}>
  <:label>Info</:label>
</.pin_input>
<.pin_input count={4} class="pin-input ui-success" value={["1", "2", "", ""]}>
  <:label>Success</:label>
</.pin_input>

Size

Use class="ui-size-{size}" to set the size of a pin input.

Available options: xs, sm, md (default), lg, xl

SM

MD

LG

XL

    <.pin_input count={4} class="pin-input ui-size-sm" value={["1", "2", "", ""]}>
  <:label>SM</:label>
</.pin_input>
<.pin_input count={4} class="pin-input ui-size-md" value={["1", "2", "", ""]}>
  <:label>MD</:label>
</.pin_input>
<.pin_input count={4} class="pin-input ui-size-lg" value={["1", "2", "", ""]}>
  <:label>LG</:label>
</.pin_input>
<.pin_input count={4} class="pin-input ui-size-xl" value={["1", "2", "", ""]}>
  <:label>XL</:label>
</.pin_input>

Rounded

Use class="ui-rounded-{step}" to set the corner radius of a pin input.

Available options: none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, full (default)

None

SM

MD

LG

Full

    <.pin_input count={4} class="pin-input ui-rounded-none" value={["1", "2", "", ""]}>
  <:label>None</:label>
</.pin_input>
<.pin_input count={4} class="pin-input ui-rounded-sm" value={["1", "2", "", ""]}>
  <:label>SM</:label>
</.pin_input>
<.pin_input count={4} class="pin-input ui-rounded-md" value={["1", "2", "", ""]}>
  <:label>MD</:label>
</.pin_input>
<.pin_input count={4} class="pin-input ui-rounded-lg" value={["1", "2", "", ""]}>
  <:label>LG</:label>
</.pin_input>
<.pin_input count={4} class="pin-input ui-rounded-full" value={["1", "2", "", ""]}>
  <:label>Full</:label>
</.pin_input>

Width

Without w-*, width comes from component CSS. Default for pin-input: md (width: fit-content).

Use class="w-{step}" to set the host stretch mode of a pin input (`w-full`, `w-fit`); use Max width for named container steps.

Available options: default (fit-content), full, fit

default (fit-content)

Code

full

Code

fit

Code

    <.pin_input count={4} class="pin-input" value={["1", "2", "", ""]}>
  <:label>Code</:label>

</.pin_input>

<.pin_input count={4} class="pin-input w-full" value={["1", "2", "", ""]}>
  <:label>Code</:label>

</.pin_input>

<.pin_input count={4} class="pin-input w-fit" value={["1", "2", "", ""]}>
  <:label>Code</:label>

</.pin_input>

States

Empty

Partial

Complete

Invalid

    <.pin_input count={4} class="pin-input" value={[]}>
  <:label>Empty</:label>
</.pin_input>
<.pin_input count={4} class="pin-input" value={["1", "2", "", ""]}>
  <:label>Partial</:label>
</.pin_input>
<.pin_input count={4} class="pin-input" value={["1", "2", "3", "4"]}>
  <:label>Complete</:label>
</.pin_input>
<.pin_input count={4} class="pin-input" value={["1", "2", "3", "4"]} invalid>
  <:label>Invalid</:label>
  <:error>Invalid code</:error>
</.pin_input>