This component provides a Svelte implementation of the COSS OTP Field behavior. Each slot is a real native input.
Installation
Usage
<script lang="ts">
import * as OTPField from "$lib/components/ui/otp-field/index.js";
</script>
<OTPField.Root aria-label="Verification code" length={6}>
<OTPField.Input aria-label="Character 1 of 6" />
<OTPField.Input aria-label="Character 2 of 6" />
<OTPField.Input aria-label="Character 3 of 6" />
<OTPField.Separator />
<OTPField.Input aria-label="Character 4 of 6" />
<OTPField.Input aria-label="Character 5 of 6" />
<OTPField.Input aria-label="Character 6 of 6" />
</OTPField.Root>API Reference
Each slot is a real <input>. Its order in the tree must match length on the root.
OTPField.Root
Root component. class merges with the default layout styles.
Use required length for the number of characters. The previous maxLength prop from the legacy input-otp package is not used.
| Prop | Type | Default | Description |
|---|---|---|---|
size | "default" \| "lg" | "default" | Size applied to all slots |
validationType | "numeric" \| "alpha" \| "alphanumeric" \| "none" | "numeric" | Accepted character set |
mask | boolean | false | Masks entered characters in each slot |
OTPField.Input
Renders one OTP character input. Slots use DOM order and do not take an index prop.
| Prop | Type | Description |
|---|---|---|
class | string | Merges with the default slot styles |
placeholder | string | Native placeholder text |
A root aria-label names the OTP group; it is not copied to the first input. With a root label alone, give every slot an explicit label, as in the usage example. When the control is inside Field.Root, the first input inherits Field.Label. Give later slots an explicit label such as Character 2 of 6.
OTPField.Separator
Visual separator between slot groups. It uses the design-system Separator for layout and semantics.
Examples
Large
With Separator
With Label
Custom normalization
Set validationType="none" with normalizeValue to normalize pasted input before it reaches state, or to enforce custom character rules. Use inputMode for the virtual keyboard hint and onValueInvalid for characters rejected after normalization.
Auto Validation
Alphanumeric
Use validationType="alphanumeric" for recovery, backup, or invite codes that mix letters and numbers.
Placeholder hints
Each slot is a real input, so placeholder and CSS work as usual. Hide the placeholder on focus when the active slot should not show a hint.
Masked entry
Pass mask on the root when the code should be obscured while it is typed, for example on shared screens.
Changelog
- September 8, 2026: Canceled form resets preserve the entered value.