Atoms
OTP Field
One-time-passcode input with per-character slots.
Use the story controls to explore the OTPField atom's properties.
Props
Core functionality
- length: Number of characters (default: 6)
- value / onValueChange: Controlled component value and handler
- sound: Audio cue per entered character (default: true)
Usage
This UI module is also available from @exegia/corpora-ui/ui/otp-field.
import { OTPField, OTPFieldInput } from "@exegia/corpora-ui"
<OTPField length={6}>
{Array.from({ length: 6 }, (_, i) => (
<OTPFieldInput key={i} />
))}
</OTPField>API reference
| Prop | Type | Default | Description |
|---|---|---|---|
| length | number | — | Number of characters. |
| value / onValueChange | string / (value: string) => void | — | Controlled code value. |
| sound | boolean | true | Tick cue per entered character. Silent until the app calls bindSounds(). |
Last updated on