OtpInput
import { OtpInput } from '@enmovil/ui-design-system';
A row of boxes for entering a one-time password, one character per box. Set the number of boxes with length; onChange fires once every box is filled.
Properties
| Property | Type | Required | Default | Allowed values | Description |
|---|---|---|---|---|---|
length | number | No | — | — | Number of boxes. Defaults to 6; onChange fires once all of them are filled. |
disabled | boolean | No | — | — | Disables every box. Off by default. |
mask | string | boolean | No | — | — | Hides the entered characters. true makes each box a password field; a single character, such as *, is shown in place of each entered character. |
Other attributes
OtpInput passes 282 further attributes through to the underlying element. They aren't part of the supported API and may change between releases, so use only the properties listed on this page.
Events
| Name | Signature | When it fires |
|---|---|---|
onChange | ((value: string) => void) | Fires once every box is filled, with the full code. Use it to auto-submit. |
onInput | ((value: string[]) => void) | Fires on every keystroke, with one entry per box. |
onFocus | FocusEventHandler<HTMLDivElement> | Fires when any box receives focus. |
onBlur | FocusEventHandler<HTMLDivElement> | Fires when a box loses focus, including when focus moves to the next box. |
Children
OtpInput does not accept children.
Variants
Loading examples…
Playground
Change the controls to see how the properties affect the component. Values the controls don't cover come from the Default example.
Loading playground…
Storybook
Open OtpInput in Storybook to try every story with the full set of controls.