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 |
| layout | compact keeps token-sized square slots; stretch fills the available inline size with equal square slots |
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.
Full-width square slots permalink
Choose layout="stretch" when the segmented field should align with the full width of a form. Each slot receives an equal share and keeps a square aspect ratio.
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, layout, 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. In the default compact layout, uiSize?: 'md' | 'lg' (default md) rescales every slot and the separator together. The stretch layout derives each square slot from the root's available inline size. 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.