Text Field OTP

Preview

About

A verification code (OTP) field, with separate visual cells per digit. It uses a single invisible TextField behind the cells to avoid keyboard flicker when moving between digits.

• length: number of digits (default 6)
• separatorAfterIndex: inserts a separator (dash) after that index, e.g. 2 groups digits as [0][1][2] — [3][4][5]
• separatorStrokeVisible: true (default) shows the dash; false keeps only the spacing
• onChanged / onCompleted: called on every change / when all digits are filled
• hasError: paints an error border on the cells
• enabled: false disables and dims the cells
• placeholder: ghost text shown in empty cells
• neutralFlatCells: soft neutral background with no shadow (used in placeholder/sheet contexts)
• suppressCellShadow / suppressFocusBorder: remove the cell shadow / focus ring, keeping everything else
• cellFillColor: overrides the fill color (ignored if neutralFlatCells is set)
• keyboardType / inputFormatters / textCapitalization: keyboard customization (default: digits only)
• semanticLabel: accessible name for the hidden field

Last updated on 08/23/2026