Component
OTPInput
A one-time code entered into a row of square cells.
import { OTPInput } from '@loidolt/theme-svelte';
Example
Enter the six-digit code
Notes
- One real input sits under the cells, so paste, autofill from SMS (
autocomplete="one-time-code") and screen readers all see a single field. - Spaces and dashes are removed from a pasted code.
type="numeric"accepts digits and opens the number pad. onCompletefires with the code once every cell is filled — the moment to submit.
Props
Generated from the component source, so it cannot drift from the implementation.
| Prop | Type | Default | Notes |
|---|---|---|---|
label required | string | — | Accessible name of the input, e.g. "Verification code". |
cellClass | string | — | |
class | string | — | |
groupSize | number | — | Draw a gap after every groupSize characters — 3 renders a six-digit code as 123 456. |
id | string | — | The id of the underlying input, so a Field label can point at it. |
length | number | 6 | Number of characters in the code. |
mask | boolean | false | Show dots instead of the characters. |
onComplete | (value: string) => void | — | Called with the code once every cell is filled. |
onValueChange | (value: string) => void | — | |
ref bindable | HTMLInputElement | null | null | The hidden input that holds the code. |
type | 'numeric' | 'alphanumeric' | 'numeric' | numeric accepts digits and opens the number pad; alphanumeric accepts letters too. |
value bindable | string | '' |
Plus the attributes of Omit<
PinInputRootProps,
| 'children'
| 'maxlength'
| 'value'
| 'onValueChange'
| 'onComplete'
| 'inputId'
| 'inputRef'
| 'pattern'
| 'inputmode'
| 'textalign'
| 'ref'
| 'class'
>, forwarded to the root element.