Components
PinInput
Segmented one-time-code input with one cell per character and a blinking caret.
PinInput renders a row of single-character cells for entering OTP and
verification codes. It is controlled — value holds the full string and
onChange fires as each character is typed or pasted. Set length for the
number of cells (defaults to 6). Built on input-otp, it handles caret movement
and paste across cells automatically.
Example
Preview
import { PinInput } from '@officina/ui';
import { useState } from 'react';
function Example() {
const [code, setCode] = useState('');
return <PinInput value={code} onChange={setCode} length={6} />;
}API
| Prop | Type | Default | Description |
|---|---|---|---|
| onChange* | (value: string) => void | — | Called with the full code as digits are entered. |
| value* | string | — | Current code value. |
| disabled | boolean | — | |
| invalid | boolean | — | Mark the field invalid for validation styling. |
| label | string | Security code | Visible label above the inputs. |
| length | number | 6 | Number of input cells. Defaults to 6. |
| name | string | — | Form field name, for native form submission / form libraries. |
| required | boolean | — | Marks the field as required for validation styling and `aria-required`. |