OTP Field

A segmented input for one-time passcodes.

View as Markdown

API Reference

Props mirror Base UI React where applicable, adapted for Svelte 5. Native HTML attributes for the rendered element are also accepted unless noted.

OTPField.Root

Extends div HTML attributes.

Property	Type	Default	Description
`length`	`number`	`—`	—
`value`	`string \| undefined`	`—`	Controlled value.
`defaultValue`	`string`	`—`	Uncontrolled initial value.
`onValueChange`	`((value: string, event: Event) => void) \| undefined`	`—`	Event handler called when the value changes.
`onComplete`	`((value: string) => void) \| undefined`	`—`	—
`disabled`	`boolean`	`false`	Whether the control ignores user interaction.
`type`	`'text' \| 'password'`	`—`	Native control type when rendering a native element.
`pattern`	`string \| undefined`	`—`	—
`autoFocus`	`boolean`	`—`	—
`name`	`string \| undefined`	`—`	—
`children`	`Snippet<[{ value: string; disabled: boolean }]>`	`—`	Content rendered inside the part.

Data attribute	Description
`data-disabled`	Present when the part is disabled.

OTPField.Input

Extends input HTML attributes.

Property	Type	Default	Description
`index`	`number \| undefined`	`—`	—
`disabled`	`boolean`	`false`	Whether the control ignores user interaction.

Data attribute	Description
`data-disabled`	Present when the part is disabled.
`data-index`	Index of the item within a collection.

OTPField.Separator

Extends div HTML attributes.

Property	Type	Default	Description
`children`	`Snippet`	`—`	Content rendered inside the part.