Components

OtpInput

A one-time code field with one box per character and a single tab stop.

Storybook: Storybook
Source: Source

States

State	Visual change	Tokens
Empty	Bordered square	`color-border-input`
Active box	Focus border and ring; an empty box shows a drawn 1 × 16 px caret	`color-border-focus`, `color-focus-ring`, `color-text-default`
Filled	Strong border, sunken background	`color-border-strong`, `color-surface-sunken`
Invalid	All boxes get the danger border	`color-border-danger`
Disabled	Faded boxes	`color-surface-disabled`, `color-border-disabled`

Measurements

Property	Value	Token
Box	32 / 36 / 40 px square	`input-height-sm`, `input-height-md`, `input-height-lg`
Boxes	Joined into one strip: shared 1 px borders, round outer corners only	`border-width-default`, `input-radius`
Gap between a group and the separator	6 px	`space-sm`
Separator	8 × 1 px	`space-md`
Character	`heading-sm`, equal-width digits	—

Tokens

Values are shown for the selected brand; switch brands from the top bar.

Token	Sample	Light mode	Dark mode
`--bigbang-input-height-md`		`36px36px36px`	`36px36px36px`
`--bigbang-input-height-lg`		`40px40px40px`	`40px40px40px`
`--bigbang-input-radius`		`10px10px10px`	`10px10px10px`
`--bigbang-color-border-input`		`#8c8c8c#8c8c8c#8c8c8c`	`#737373#737373#737373`
`--bigbang-color-border-strong`		`#8c8c8c#8c8c8c#8c8c8c`	`#8c8c8c#8c8c8c#8c8c8c`
`--bigbang-color-surface-sunken`		`#f5f5f5#f5f5f5#f5f5f5`	`#171717#171717#171717`
`--bigbang-color-border-danger`		`#c14347#c14347#c14347`	`#ff9a97#ff9a97#ff9a97`
`--bigbang-color-focus-ring`		`#146d83#737373#737373`	`#77bacf#8c8c8c#8c8c8c`
`--bigbang-border-width-default`		`1px1px1px`	`1px1px1px`
`--bigbang-space-sm`		`6px6px6px`	`6px6px6px`
`--bigbang-period-caret-blink`		`1s1s1s`	`1s1s1s`

Motion and interaction

Interaction	Property	Duration token	Easing token	Reduced motion
Active box changes	Border colour (`motion.field`); the ring at once	`motion-focus-duration`	`motion-focus-easing`	Unchanged.
A box fills	Border and background colour	`motion-focus-duration`	`motion-focus-easing`	Unchanged.
Error text	Fades in, drops 4 px (`motion.fieldMessage`)	`motion-collapsible-duration`	`motion-collapsible-easing`	It only fades.
Caret in the empty active box	Blinks five times (`opacity`), then stays	`period-caret-blink` (1000 ms)	`easing-linear`	Stays still.

An error never shakes. See Motion for values.