Input OTP
An accessible one-time-password input with copy-paste support.
<script lang="ts">
import {
InputOTP,
InputOTPGroup,
InputOTPSlot,
InputOTPSeparator
} from "$lib/components/ui/input-otp";
</script>
<InputOTP maxlength={6}>
{#snippet children({ cells })}
<InputOTPGroup>
{#each cells.slice(0, 3) as cell (cell)}
<InputOTPSlot {cell} />
{/each}
</InputOTPGroup>
<InputOTPSeparator />
<InputOTPGroup>
{#each cells.slice(3, 6) as cell (cell)}
<InputOTPSlot {cell} />
{/each}
</InputOTPGroup>
{/snippet}
</InputOTP>Installation
Install the lily base and `utils` (run once per project).
npx lily-svelte@latest initCopy the input-otp source from the registry into $lib/components/ui/input-otp.
Usage
<script lang="ts">
import {
InputOTP,
InputOTPGroup,
InputOTPSlot,
InputOTPSeparator
} from '$lib/components/ui/input-otp';
</script>
<InputOTP maxlength={6}>
{#snippet children({ cells })}
<InputOTPGroup>
{#each cells.slice(0, 3) as cell (cell)}
<InputOTPSlot {cell} />
{/each}
</InputOTPGroup>
<InputOTPSeparator />
<InputOTPGroup>
{#each cells.slice(3, 6) as cell (cell)}
<InputOTPSlot {cell} />
{/each}
</InputOTPGroup>
{/snippet}
</InputOTP>