OTP Input
The one-time code field.
Walkthrough
1. Basic
Six digits. Try pasting 483920 — the row fills in one go.
Waiting for six digits
<script lang="ts"> import { OtpInput } from 'omaris'; let code = $state('');</script><div class="flex flex-col items-center gap-3"> <OtpInput bind:value={code} /> <p class="text-sm text-muted-foreground">{code || 'Waiting for six digits'}</p></div>2. Shapes
Three fills, and a break where the code is read with one.
<script lang="ts"> import { OtpInput } from 'omaris';</script><div class="flex flex-col items-center gap-5"> <OtpInput variant="outline" value="483920" groups={[3, 3]} /> <OtpInput variant="filled" value="483920" /> <OtpInput variant="underline" value="483920" /></div>3. States
A wrong code shakes once and turns destructive; a PIN masks what it holds.
<script lang="ts"> import { OtpInput } from 'omaris'; let pin = $state('1234');</script><div class="flex flex-col items-center gap-5"> <OtpInput value="000000" invalid /> <OtpInput length={4} bind:value={pin} mask label="PIN" /> <OtpInput length={8} value="A7F2QK" pattern="alphanumeric" uppercase groups={[4, 4]} size="sm" /></div>4. Overridden
Round boxes, a wider gap and a monospace face — the sizing still holds.
<script lang="ts"> import { OtpInput } from 'omaris';</script><OtpInput value="4839" length={4} size="lg" class="gap-3" classes={{ slot: 'rounded-full', char: 'font-mono' }}/>