Input OTP

<.input_otp id="demo-otp" name="code" length={6} />

Masked PIN

Set mask to render password-style slots, and use a shorter length for PIN entry.

<.input_otp id="demo-pin" name="pin" length={4} mask placeholder="•" />

Grouped With Separator

Use groups with a :separator slot to build common verification-code groupings without repeating each slot.

<.input_otp id="demo-grouped" name="code" length={6} value="123" groups={[3, 3]}>
  <:separator>—</:separator>
</.input_otp>

Auto-Verify On Complete

Pass an on_complete event name to fire a LiveView event the moment all slots are filled — perfect for auto-submitting verification codes.

<.input_otp id="demo-auto" name="code" length={6} on_complete="verify_code" />
<p :if={@completed_code} class="text-sm text-muted-foreground">
  Auto-verified code: <strong class="text-foreground">{@completed_code}</strong>
</p>

Invalid State

Pass invalid=true to mark all slots with aria-invalid and apply the destructive border/ring styling — use this when a code fails verification.

<.input_otp id="demo-invalid" name="code" length={6} value="000000" invalid />