# Pin Input (/docs/pin-input)
`PinInput` is a row of single-character cells for one-time codes, PINs, and confirmation tokens, built on Ark UI's PinInput machine. Each cell is a real ``; the machine handles autofocus advance, paste-to-fill across cells, backspace navigation, masking, and `otp` autofill, and a hidden input backs form submission.
```tsx
import { PinInput } from '@42-central/ui-react/pin-input';
```
The value is a single `string` — the machine speaks `string[]` (one char per cell), but `value` / `defaultValue` take a string and `onChange` / `onComplete` hand one back. Like the rest of the family it carries its own `label`, `description`, `error`, and `required` — no external wrapper needed — and passing `error` flips the cells to the invalid (red) state. Omit them and it still composes cleanly inside a [`Field`](/docs/field).
There's no single root to land a `testId` on — each of the `length` cells is its own ``. So instead every cell gets its own `` `${testId}-${i}` `` (0-indexed). See the [Testing](/docs/testing) guide.
## Playground [#playground]
## One-time code [#one-time-code]
`otp` opts the cells into `autocomplete="one-time-code"`, so iOS / Android surface the SMS code above the keyboard and fill every cell with one tap.
## Masked [#masked]
`mask` hides the entered characters like a password field — for PINs that shouldn't be shoulder-surfed.
## Value type [#value-type]
`type` constrains what each cell accepts: `numeric` (default), `alphanumeric`, or `alphabetic`. Numeric cells also hint the numeric keyboard on mobile.
## Sizes [#sizes]
Five sizes — `xs` through `xl` — matching the rest of the family. Each cell is a square that scales with the text.
## Colors [#colors]
Like the rest of the form family, the cells are palette-independent throughout — including the focus halo, which is a fixed `brand-500` per the 42 UI Kit spec. `color` is accepted for consistency with the rest of the kit but tints nothing here. See [Colors](/docs/colors) and [Focus](/docs/focus).
## Invalid & disabled [#invalid--disabled]
`invalid` swaps every cell's border and ring to red regardless of `color` (and sets `aria-invalid`). `disabled` dims and blocks the cells; `readOnly` keeps full contrast but rejects edits.
## With label, description & error [#with-label-description--error]
`label`, `description` (helper text), and `error` are built in via [`Field`](/docs/field) — no external wrapper needed. Passing `error` flips the cells to the invalid (red) state; `required` adds the semantic flag and a red asterisk on the label.
If you omit these props, the cells still compose inside an outer [`Field`](/docs/field), inheriting its `invalid`, `disabled`, and `readOnly` from context — so an `error` on the field flips them red automatically.
## Controlled [#controlled]
Drive the value from state. `onChange` fires on every keystroke with the joined string; `onComplete` fires once every cell is filled.
```tsx
'use client';
import { useState } from 'react';
import { PinInput } from '@42-central/ui-react/pin-input';
export function CodeInput() {
const [value, setValue] = useState('');
return (
verify(code)}
/>
);
}
```
## Forms [#forms]
A `name` wires the hidden input into native `
```
## API [#api]
## Accessibility [#accessibility]
* Full PinInput keyboard model from Ark: typing advances to the next cell, `Backspace` clears and steps back, `←` / `→` move between cells, and pasting a code fills every cell at once.
* Each cell is labelled (`Pin input 1 of N`, …) and the cells are grouped, so assistive tech announces position and length.
* `invalid` sets `aria-invalid` on the cells. Pass `label` / `description` / `error` for an accessible name and error text via the built-in [`Field`](/docs/field), or compose inside an outer `Field` instead.
* A hidden input backs form submission; pass `name` to include the joined value, and `otp` to enable OS-level one-time-code autofill.