Input OTP

Use input-otp for one-time codes. Built on bits-ui’s PinInput primitive. Compose Root with Group and Slot, and an optional Separator between groups, inside the cells snippet.

1<script lang="ts">
2	import * as InputOTP from '~/components/input-otp';
3</script>
4
5<InputOTP.Root maxlength={6}>
6	{#snippet children({ cells })}
7		<InputOTP.Group>
8			{#each cells.slice(0, 3) as cell (cell)}
9				<InputOTP.Slot {cell} />
10			{/each}
11		</InputOTP.Group>
12		<InputOTP.Separator />
13		<InputOTP.Group>
14			{#each cells.slice(3, 6) as cell (cell)}
15				<InputOTP.Slot {cell} />
16			{/each}
17		</InputOTP.Group>
18	{/snippet}
19</InputOTP.Root>