Pin Input
A fully accessible, token-driven PinInput component built with strict WAI-ARIA compliance.
tsx
import { PinInput } from '@nofinite/nui';Interactive Preview
Loading preview...
Usage
Basic Example
tsx
import { PinInput } from '@nofinite/nui';
<PinInput />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
length | number | 4 | — |
value | string | — | — |
defaultValue | string | — | — |
onChange | ((value: string) => void) | — | — |
onComplete | ((value: string) => void) | — | — |
mask | boolean | false | — |
disabled | boolean | false | — |
autoFocus | boolean | false | — |
placeholder | string | ○ | — |
type | enum | numeric | — |
otp | boolean | false | — |
size | enum | md | — |
name | string | — | Name attribute for native form submission |
Accessibility & Guidelines
- Semantic Tokens: Built strictly using Nuicss semantic tokens (
bg-surface,text-default,border-subtle,bg-primary). - Keyboard Navigation: Adheres to strict WAI-ARIA standards.
- Screen Reader Support: Includes semantic roles and live regions where appropriate.