Form fields·loomora/PinField
PinField
Renders a fixed-length sequence of digit inputs with paste distribution and keyboard focus movement.
Interactive live playground
Tweak props, change states, and see the live component respond in real time.
How to call
Import directly from the Loomora package root. For projects without Tailwind CSS, ensure loomora/dist/index.css is imported once in your root layout.
import { PinField } from 'loomora'
<PinField label="Verification code" length={6} properties={{ value, onChange: setValue }} />API reference
Important public props and how they affect rendering.
| Prop | Type | Default | Description |
|---|---|---|---|
| length | number | config default | Number of digit cells. |
| properties.value | string[] | [] | Controlled digit array. |
| properties.onChange | Dispatch<SetStateAction<string[]>> | — | Receives the updated digit array. |
| properties.autoFocus | boolean | true | Focuses the first cell on mount. |
| properties.disabled / required | boolean | false | Native input states. |