Takes a one-time code, one digit per box, pasted or typed.
InputOtp
per slot. Override both for alphanumeric codes.\n- Backspace clears the focused slot in place; pressing it again retreats. Arrow keys, Home, End and paste behave per platform expectations.\n- `disabled` dims the whole row as a single block; the slots remain in the tab order only when the row is enabled.\n\n**Related patterns.**\n- `Patterns/Forms · FieldAnatomy` — wrap the row in a `Field` for the canonical Label · Control · Description / Error stack.\n- `Patterns/Forms · ValidationFlow` — error placement and tone.\n- `Patterns/Feedback · InlineFeedback` — error lives next to its cause.\n- `Patterns/Composition · AtomToMolecule` — InputOtp is a leaf molecule, not a primitive.\n- `Patterns/Decision Matrix · ComponentChoice` — pick `InputOtp` over `Input` when the input is a fixed-length code.\n\n## Use it for\n\n- OTP / 2FA code → `InputOtp` (molecule)\n\n## Axes\n\n| Axis | Part | Values | Default | Meaning |\n|---|---|---|---|---|\n| `size` | — | `sm` `md` `lg` | `md` | Ergonomic scale, in three families (control, text, container). |\n| `invalid` | — | `true` `false` | `false` | Fails validation: a danger edge, announced as invalid; pair it with an error message. |\n| `filled` | — | `true` `false` | `false` | Holds a value: the label stays raised over the field. |\n| `disabled` | — | `true` `false` | `false` | Not available: dimmed, skipped by the keyboard, ignores the pointer. |\n\n## Stories\n\n- [Playground](/?path=/story/components-molecules-inputotp--playground) · frame: `/iframe.html?id=components-molecules-inputotp--playground&viewMode=story`\n- [Sizes](/?path=/story/components-molecules-inputotp--sizes) · frame: `/iframe.html?id=components-molecules-inputotp--sizes&viewMode=story`\n- [States](/?path=/story/components-molecules-inputotp--states) · frame: `/iframe.html?id=components-molecules-inputotp--states&viewMode=story`\n- [In Context](/?path=/story/components-molecules-inputotp--in-context) · frame: `/iframe.html?id=components-molecules-inputotp--in-context&viewMode=story`\n- [Typing flow (interaction test)](/?path=/story/components-molecules-inputotp--typing-flow) — interaction test · frame: `/iframe.html?id=components-molecules-inputotp--typing-flow&viewMode=story`\n\n## Patterns consulted\n\n- Patterns/Forms · FieldAnatomy\n- Patterns/Forms · ValidationFlow\n- Patterns/Feedback · InlineFeedback\n- Patterns/Composition · AtomToMolecule\n- Patterns/Decision Matrix · ComponentChoice\n\n## Always\n\n- Tokens only (R04); variants are semantic axes, never appearance (R02).\n- Typography and actions are Poesía atoms, never raw HTML with utilities.\n- Vibrant panes need a ground and never nest (ADR-027).\n"}}
