Components

OtpInput

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

Storybook: Storybook
Source: Source

28 October 2026

Added

First version: a code field with one tab stop on Base UI OTP Field.
length, groupSize, validationType, mask, autoSubmit, onValueComplete.
Box position names localised through ui.otp.*.
purpose (login or confirm, default confirm) and data-purpose on the root.

Changed

New sm size (32 px boxes); md is 36 px and lg 40 px.
The boxes get a hairline shadow; invalid boxes get a 2 px danger halo.
autoSubmit works only with purpose="login"; with confirm it is ignored with a development warning. An approval code never submits itself.
The Turkish position name of the boxes is “Hane 2 / 6” instead of “Rakam 2 / 6”.