OTP Field
Captures a one-time code in a single accessible input while rendering a segmented visual surface.
Contract
| Axis | Behavior |
|---|---|
| value | uncontrolled with defaultValue, controlled with value and onValueChange |
| input | supports typing, full-code paste, deletion, focus navigation, and one native form value |
| autocomplete | defaults to one-time-code on the first slot for password-manager and platform autofill |
| length | clamps the value and determines completion and validity; render exactly that many Input parts |
Install
pnpm add @tinyrack/uiScroll inside the code area to read long lines.
Styles
@import '@tinyrack/ui/components/otp-field.css';Scroll inside the code area to read long lines.
Imports
import { TROTPField } from '@tinyrack/ui/components/otp-field';Scroll inside the code area to read long lines.
Playground
Usage
Examples
Sizes permalink
Choose uiSize to align the OTP slots with neighboring Input, Button, or NumberField controls.
Paste, completion, and rejected characters permalink
Paste a four-digit code or type a letter to inspect the accepted, completed, and rejected event reasons.
API
Use the TROTPField.Root, TROTPField.Input, and TROTPField.Separator namespace members. The same subpath also exports the prefixed TROTPFieldRoot, TROTPFieldInput, and TROTPFieldSeparator bindings plus their prop and state types; it does not export bare Root, TRInput, or TRSeparator bindings.
| Part | Key props |
|---|---|
Root | length, value, defaultValue, onValueChange, onValueComplete, onValueInvalid, validationType, normalizeValue, autoComplete, inputMode, mask, name, form, required, disabled, readOnly, autoSubmit, uiSize, ref, render |
Input | Native input props, className, style, ref, and Base UI render |
Separator | orientation (defaults to vertical) plus TRSeparator props and ref |
Root renders a labeled role="group"; give it a visible label with aria-labelledby. Slot IDs derive from the root id, and the first slot receives one-time-code autocomplete by default. uiSize?: 'md' | 'lg' (default md) rescales every slot and the separator together. onValueChange, onValueComplete, and onValueInvalid receive event details whose reason identifies typing, clearing, paste, or keyboard changes. Disabled fields are omitted from form data, while read-only fields keep their submitted value.