إدخال الرمز · الحدث

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

  

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

  

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

  

    <.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>