Studio
2

OTP Field

Installation

pnpm dlx @mielui/svelte add otp-field

Usage and accessibility

Bindvalue to the entered code. A single native input handles focus, selection, paste, autofill, and form submission. The visibleCell parts are hidden from assistive technology.

LabelRoot using a native label and matchingid ,aria-label , orField.Control . The element binding refers to the native input.

Digits are accepted by default. Set pattern and inputmode together for another alphabet, and use pasteTransformer to normalize pasted text. The default autocomplete is one-time-code. Set minlength equal to length together with required when the browser must reject incomplete codes. Server validation must still check the submitted code.

Use the children snippet to group or restyle the supplied cells, inserting Separator between groups. Keep cells in their original order and render every supplied cell. Root renders the same public Group and Cell parts when children is omitted.

Bind value to control the code. Reducing length truncates the value so hidden characters cannot be submitted. onComplete receives the completed value; it does not verify the code or submit automatically. For automatic submission, call the form’s requestSubmit(), which preserves validation and submit handlers. A normal reset restores the initial value; canceled resets preserve the current code. Disabled codes are omitted from submission.

Form submission and reset

Alphanumeric codes

Disabled

API reference

OtpField.Root

Prop Type Default
id string | undefined —
style string | StyleProperties | null | undefined —
disabled boolean | undefined

Whether the input is disabled

 —
value Bindable string | undefined

The value of the input.

 ''
onValueChange OnChangeFn<string> | undefined

A callback function that is called when the value of the input changes.

 —
pasteTransformer ((text: string) => string) | undefined

A callback function that is called when the user pastes text into the input. It receives the pasted text as an argument, and should return the sanitized text.

 —
textalign "left" | "center" | "right" | undefined

Customize the alignment of the text within in the input.

 —
pushPasswordManagerStrategy "none" | "increase-width" | undefined

How to handle the input when a password manager is detected.

 —
length number | undefined 6
element Bindable HTMLInputElement | null | undefined null
onComplete ((value: string) => void) | undefined —
children Snippet<[{ cells: PinInputCell[]; isFocused: boolean; }]> | undefined —

OtpField.Cell

Prop Type Default
id string | undefined —
style string | StyleProperties | null | undefined —
cell Required { char: string | null | undefined; isActive: boolean; hasFakeCaret: boolean; }

This specific cell, which is provided by the `cells` snippet prop from the `PinInput.Root` component.

 —
ref Bindable HTMLElement | null | undefined null

OtpField.Group

OtpField.Separator