OTP Field

A segmented input for one-time passwords and verification codes.

<script lang="ts">
import { OTPField, OTPFieldInput } from "coss-svelte";
</script>

<OTPField aria-label="One-time password" length={6}>
	{#snippet children({ cells })}
		{#each cells as cell, index}
			<OTPFieldInput
				{cell}
				aria-label={index === 0 ? undefined : `Character ${index + 1} of 6`}
			>
				{cell.char ?? ""}
			</OTPFieldInput>
		{/each}
	{/snippet}
</OTPField>

Installation

Install the component package, shared coss-svelte theme, and Bits UI peer.

npm install coss-svelte @coss-svelte/theme bits-ui

Usage

Import the Svelte component exports directly from the package.

import { OTPField, OTPFieldCell, OTPFieldInput } from "coss-svelte";

Anatomy

OTPField
OTPFieldCell
OTPFieldInput

API Reference

OTPField

A segmented input for one-time passwords and verification codes.

Prop	Type	Default	Description
`bind:value`	`string`	`""`	Current value for the component. Bind with `bind:value` when supported.
`length`	`number`	`6`	Number of one-time-code cells to render.
`name`	`string \| null`	-	Serializes the invariant numeric value through a hidden form control.
`required`	`boolean \| null`	`false`	Marks the field or label as required.
`disabled`	`boolean`	`false`	Disables interaction with the control.
`onComplete`	`((value: string) => void)`	-	Runs once when every one-time-code cell contains a character.

children : Snippet<[PinInputRootSnippetProps]>bind:ref : HTMLElement | null

Inherits from Bits UI PinInput.Root.

OTPFieldCell

Renders one cell within the parent component.

children : Snippet<[]>bind:ref : HTMLElement | null

Inherits from Bits UI PinInput.Cell.

OTPFieldInput

Renders the input field for the parent component.

children : Snippet<[]>ref : HTMLElement | null

Inherits from Svelte component attributes.

Implementation Details

Status: Stable
Foundation: bits
Category: Selection & Input
Particles: 9