Capítulo 32 de 51
A fixed-length, per-character input group for one-time-passcodes/verification codes — stabilized in v1.6.0, handles paste-splitting across boxes, Ctrl/Cmd shortcut support, masking, and auto-submit on completion.
Root → repeated Input (one per character) + optional Separator (visual grouping, e.g. XXX-XXX).length (required on Root): number of character boxes/inputs.autoSubmit: automatically submits the enclosing form once all characters are filled — pairs with onValueComplete if you need a callback instead of/alongside a submit.mask: renders entered characters as dots/asterisks (e.g. for a numeric PIN) instead of the raw characters.normalizeValue (renamed from sanitizeValue in v1.5.0): transforms pasted/typed input before it's distributed across the per-character inputs — composable with validation.validationType: constrains accepted characters (e.g. numeric-only) at the input level, in addition to Field-level validate.onValueInvalid: fires when entered content fails validationType, separate from the general Field validation error path.inputMode: sets the mobile keyboard type shown for each character box (e.g. numeric).data-complete: present once every character position is filled — the state to key "submit" button enablement or auto-submit logic off of.| Part | Notable props | Notable data attributes |
|---|---|---|
Root | length (required), value/onValueChange, mask, autoSubmit, onValueComplete, onValueInvalid, validationType, normalizeValue, autoComplete, inputMode | data-complete, plus shared field-state attributes |
Input | — | data-complete, plus shared field-state attributes |
Separator | orientation | — |
autoComplete correctly (typically "one-time-code") so mobile browsers/password managers can autofill an SMS-delivered code directly — this is the single biggest UX win for OTP inputs and is easy to forget.autoSubmit + onValueComplete together rather than a separate manual "Verify" button flow, unless the product explicitly wants a confirmation step before submitting.normalizeValue (v1.5.0+) or Ctrl/Cmd shortcut support (v1.5.0+) if pinned to an older release.sanitizeValue→normalizeValue rename.