A row of six underline digit cells for one-time password entry. The single variant axis is state, which drives the underline color and the blinking cursor visibility on the active cell.
Overview
A row of six underline digit cells for one-time password entry. The single variant axis is state, which drives the underline color and the blinking cursor visibility on the active cell.
The default variant.
Anatomy
- 1Root required Horizontal row that holds the six OTP.Digit cells at gap/positive/xl spacing.
- 2OTP.Digit required Repeated six times. Each cell is 36x52pt and contains a Container.Value (Label.Digit + Cursor) and a Separator underline.
- 3Label.Helper optional Error message shown below the digit row only in the error state. Color is content/status/error.
Measurements
Specs
Values resolved live from the token spine. Token names follow the active platform; each links to its page.
Properties
The component’s Figma API, the properties you set on an instance. Useful to designers in Figma and to engineers mapping it to code props.
Accessibility
Ensure a minimum 44 by 44pt tap target for any interactive instance, adding surrounding padding when the component itself is shorter. Keep text concise, and never rely on color alone to convey meaning; pair it with a label or an icon so the message survives for color-blind and low-vision users.
Reference: Apple Human Interface Guidelines and WCAG 2.5.5 Target Size.