InputOTP

<.input_otp id="otp-default" max_length={6}>
  <.input_otp_group>
    <.input_otp_slot :for={i <- 0..2} index={i} />
  </.input_otp_group>
  <.input_otp_separator />
  <.input_otp_group>
    <.input_otp_slot :for={i <- 3..5} index={i} />
  </.input_otp_group>
</.input_otp>

<.input_otp id="otp-pin" max_length={4}>
  <.input_otp_group>
    <.input_otp_slot :for={i <- 0..3} index={i} />
  </.input_otp_group>
</.input_otp>

<.input_otp id="otp-alpha" max_length={6} pattern="alphanumeric">
  <.input_otp_group>
    <.input_otp_slot :for={i <- 0..5} index={i} />
  </.input_otp_group>
</.input_otp>

<.input_otp id="otp-hex" max_length={8} pattern="[a-fA-F0-9]">
  <.input_otp_group>
    <.input_otp_slot :for={i <- 0..3} index={i} />
  </.input_otp_group>
  <.input_otp_separator />
  <.input_otp_group>
    <.input_otp_slot :for={i <- 4..7} index={i} />
  </.input_otp_group>
</.input_otp>

<.input_otp id="otp-seps" max_length={6}>
  <.input_otp_group>
    <.input_otp_slot :for={i <- 0..1} index={i} />
  </.input_otp_group>
  <.input_otp_separator />
  <.input_otp_group>
    <.input_otp_slot :for={i <- 2..3} index={i} />
  </.input_otp_group>
  <.input_otp_separator />
  <.input_otp_group>
    <.input_otp_slot :for={i <- 4..5} index={i} />
  </.input_otp_group>
</.input_otp>

<.input_otp id="otp-disabled" max_length={4} default_value="1234" disabled>
  <.input_otp_group>
    <.input_otp_slot :for={i <- 0..3} index={i} />
  </.input_otp_group>
</.input_otp>

<.input_otp id="otp-hybrid" max_length={6} on_value_change="otp-value-change" on_complete="otp-complete">
  <.input_otp_group>
    <.input_otp_slot :for={i <- 0..2} index={i} />
  </.input_otp_group>
  <.input_otp_separator />
  <.input_otp_group>
    <.input_otp_slot :for={i <- 3..5} index={i} />
  </.input_otp_group>
</.input_otp>

<div class="space-y-4">
  <.input_otp id="otp-server" max_length={6} value={@server_value} on_value_change="server-otp-change">
    <.input_otp_group>
      <.input_otp_slot :for={i <- 0..2} index={i} />
    </.input_otp_group>
    <.input_otp_separator />
    <.input_otp_group>
      <.input_otp_slot :for={i <- 3..5} index={i} />
    </.input_otp_group>
  </.input_otp>

  <div class="flex gap-2">
    <.button variant="outline" size="sm" phx-click="set-server-otp" phx-value-val="">Clear</.button>
    <.button variant="outline" size="sm" phx-click="set-server-otp" phx-value-val="123">123</.button>
    <.button variant="outline" size="sm" phx-click="set-server-otp" phx-value-val="123456">123456</.button>
    <.button variant="outline" size="sm" phx-click="set-server-otp" phx-value-val="999999">999999</.button>
  </div>
</div>

<.form for={@form} phx-change="validate" phx-submit="save" class="space-y-4 max-w-xs">
  <.form_field
    field={@form[:otp]}
    label="Verification Code"
    type="input_otp"
    max_length={6}
    description="Enter the 6-digit code sent to your phone."
  />
  <.button type="submit">Verify</.button>
</.form>