# PinInput

> Masked numeric PIN.

Source: https://ui.jcsoftdev.com/docs/components/pin-input

Masked numeric PIN. `autocomplete` is disabled on purpose so browsers do not
mistake it for a one-time code.

## Import

```ts
import { PinInput } from "@jcsoftdev/ui/forms";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/forms/pin-input`.

## Usage

```tsx
<PinInput length={4} label="PIN del barbero" />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `length` | `number` | `4` |  |
| `value` | `string` |  |  |
| `defaultValue` | `string` | `""` |  |
| `onValueChange` | `((value: string) => void)` |  |  |
| `label` | `string` | `"PIN"` | Accessible name of the input. |
| `statusLabel` | `((entered: number, length: number) => string)` | `defaultStatusLabel` | Builds the polite live-region announcement. |
| `className` | `string` |  |  |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/forms-pininput--default)
- [Six Digits](/storybook/?path=/story/forms-pininput--six-digits)
- [Prefilled](/storybook/?path=/story/forms-pininput--prefilled)
- [Spanish Status](/storybook/?path=/story/forms-pininput--spanish-status)
- [Controlled](/storybook/?path=/story/forms-pininput--controlled)
- [Narrow](/storybook/?path=/story/forms-pininput--narrow)

## Source

`packages/ui/src/forms/pin-input/pin-input.tsx`