# OTP Field

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

## Installation

Start from a Svelte 5 application, then install the component package, shared theme, and Bits UI peer:

```bash
pnpm add coss-svelte @coss-svelte/theme bits-ui
```

Import `@coss-svelte/theme/style-coss.css` after Tailwind from the application's global stylesheet.

## Usage

```svelte
<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>

```

## 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. |

**Composition and refs**

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

Inherits from [Bits UI PinInput.Root](https://bits-ui.com/docs/components/pin-input#root).

### OTPFieldCell

Renders one cell within the parent component.

**Composition and refs**

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

Inherits from [Bits UI PinInput.Cell](https://bits-ui.com/docs/components/pin-input#cell).

### OTPFieldInput

Renders the input field for the parent component.

**Composition and refs**

- `children: Snippet<[]>`
- `ref: HTMLElement \| null`

Inherits from [Svelte component attributes](https://svelte.dev/docs/svelte/basic-markup#Attributes).

## Implementation Details

| Field | Value |
| --- | --- |
| Status | Stable |
| Foundation | bits |
| Category | Selection & Input |
| Particles | 9 |

## Status

Stable for the current coss-svelte surface.

## Agent Notes

- Import Svelte exports directly from `coss-svelte`.
- This is Svelte 5 code: use `class`, lowercase event properties, runes, snippets, and documented `bind:*` contracts. Do not emit JSX, React hooks, `className`, `asChild`, or Base UI imports.
- Prefer this route's example and generated API table over React COSS snippets; COSS React particles are design references only.
- The copy-and-own registry is a preview. Inspect `/r/otp-field.json` for the complete local file and dependency closure.
- OTP Field is stable in the current source catalog.