PhxShadcn

Input Otp

6-digit OTP with separator Open in playground 
<.input_otp id="input-otp-single-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>
4-digit PIN Open in playground 
<.input_otp id="input-otp-single-four-digits" max_length={4}>
  <.input_otp_group>
    <.input_otp_slot :for={i <- 0..3} index={i} />
  </.input_otp_group>
</.input_otp>
Alphanumeric pattern Open in playground 
<.input_otp id="input-otp-single-alphanumeric" pattern="alphanumeric" max_length={6}>
  <.input_otp_group>
    <.input_otp_slot :for={i <- 0..5} index={i} />
  </.input_otp_group>
</.input_otp>
Disabled with pre-filled value Open in playground 
<.input_otp disabled id="input-otp-single-disabled" max_length={4} default_value="1234">
  <.input_otp_group>
    <.input_otp_slot :for={i <- 0..3} index={i} />
  </.input_otp_group>
</.input_otp>