OTPCell
- Stable
- WCAG 2.2 evidence
- RTL
One character box of a one-time code. A presentational part of {@link OTPInput }, which renders the cells
from its value and marks the active one with data-focused (and data-hovered while hovered); Figma advises against using a
cell on its own. Empty and Filled follow from digit; Focused is the data-focused attribute (rule G1). Renders in React
Server Components. Inside OTPInput the row of cells is hidden from assistive technology: one real input carries the value, the label and the
messages, so screen readers meet a single labelled field (WCAG 1.3.1, 4.1.2).
import { OTPCell } from "@nexera-ui/react";- 2
- examples
- 6
- props
- 4
- live controls
- 1
- platform
- 5
- WCAG criteria
- 0
- blocks use it
Try every prop. Copy the code.
Change the props and the code updates. Check light and dark, LTR and RTL, and phone width.
import { OTPCell } from "@nexera-ui/react";
<OTPCell />Examples 1
The same examples as Storybook, rendered live. Open Code to copy one.
Masked
Masked cells show a dot in the digit colour instead of the character.
import { OTPCell } from "@nexera-ui/react";
export function Masked() {
return (
<div className="flex flex-wrap gap-2">
<OTPCell digit="4" isMasked />
<OTPCell digit="4" isMasked isInvalid />
<OTPCell digit="4" isMasked size="lg" />
</div>
);
}
Props 6
Press "Try it" on a card to load that prop into the playground.
6 props shown
digitNexerastringThe character shown in the cell. Shown when provided; an empty cell shows nothing, or the caret while it is focused. The Figma sample "4" is example content.
isMaskedNexerabooleanShow a dot instead of the character. The character is not rendered at all, so it is not exposed to assistive technology either.
sizeNexera"md" | "lg"Cell size: 40 px with Heading/H3, or 48 px with Heading/H2.
isInvalidNexerabooleanError state: danger stroke and danger digit colour. The field that owns the cell must also show the
error as text (WCAG 1.4.1, 3.3.1); OTPInput does.
isDisabledNexerabooleanDisabled state: sunken fill and disabled text.
statusNexera"success"Semantic status: success stroke. Say it in text as well (OTPInput shows "Verified").
* Required. React Aria props shown are the ones most apps use; the component accepts the rest of its React Aria props too.
Accessible by default.
Built on React Aria, and covered by the WCAG 2.2 evidence generated on every build.
WCAG 2.2 evidence
2 direct · 3 supporting- 1.1.1Non-text ContentLevel A · tested directly
- 1.3.1Info and RelationshipsLevel A · tested directly
- 1.4.1Use of ColorLevel A · supporting test
- 1.4.11Non-text ContrastLevel AA · supporting test
- 2.4.7Focus VisibleLevel AA · supporting test
Fits any width.
Nexera components respond to the space they are given. Drag the corner of the frame, or pick a width.
Styling hooks
Pass className to add Tailwind classes (merged last). State is exposed as data attributes, so you can style it with variants like data-pressed:.
data-disableddata-filleddata-focuseddata-hovereddata-invalid
<OTPCell className="data-disabled:opacity-90 shadow-sm" />Used in blocks
No block uses OTPCell yet.
Related components
- CalendarDayOne day of a {@link CalendarMonth } grid, built on React Aria `CalendarCell`: a `gridcell` whose button is named by the full, localised date ("Wednesday, October 14, 2026"), with `aria-selected`, `aria-disabled` and the "today" and range descriptions read by screen readers (WCAG 1.3.1, 4.1.2).
- CalendarMonthA month calendar for picking a date or a date range: header with previous / next buttons and the localised month name, weekday row, and six weeks of `CalendarDay`s.
- CheckboxThe bare 18 px checkbox: one independent yes/no choice applied on submit, or a row selector in a table, list or tree.
- CheckboxCardA large checkbox option with an icon, a title and a description, for a few options that need explanation (notification channels, benefits).
- CheckboxFieldA checkbox with a label and optional helper text: the box (the same element as `Checkbox`) followed by the label and description, applied on submit.
- ColorInputA hex colour field with a swatch and a picker popover.
- ColorPickerPicks a colour.
- ColorTokenCardDocumentation card for one colour token: a 96 px colour sample with an "Aa" text sample, then the name, token path, hex value and contrast note as text.