---
id: pin-input
title: Pin Input
description: For pin or verification codes with auto-focus transfer and masking options.
---

<ComponentPreview id="PinInput" />

## Anatomy

<Anatomy id="pin-input" />

```tsx
<PinInput.Root>
  <PinInput.Label />
  <PinInput.Control>
    <PinInput.Input />
  </PinInput.Control>
  <PinInput.HiddenInput />
</PinInput.Root>
```

## Examples

<Example id="basic" />

### Placeholder

To customize the default pin input placeholder `○` for each input, pass the placeholder prop and set it to your desired
value.

<Example id="custom-placeholder" />

### Blur on Complete

By default, the last input maintains focus when filled, and we invoke the `onValueComplete` callback. To blur the last
input when the user completes the input, set the prop `blurOnComplete` to `true`.

<Example id="blur-on-complete" />

### OTP Mode

To trigger smartphone OTP auto-suggestion, it is recommended to set the `autocomplete` attribute to "one-time-code". The
pin input component provides support for this automatically when you set the `otp` prop to true.

<Example id="otp-mode" />

### Masking

When collecting private or sensitive information using the pin input, you might need to mask the value entered, similar
to `<input type="password"/>`. Pass the `mask` prop to `true`.

<Example id="mask" />

### Change Events

The pin input component invokes several callback functions when the user enters:

- `onValueChange` — Callback invoked when the value is changed.
- `onValueComplete` — Callback invoked when all fields have been completed (by typing or pasting).
- `onValueInvalid` — Callback invoked when an invalid value is entered into the input. An invalid value is any value
  that doesn't match the specified "type".

### Field

The `Field` component helps manage form-related state and accessibility attributes of a pin input. It includes handling
ARIA labels, helper text, and error text to ensure proper accessibility.

<Example id="with-field" />

### Root Provider

An alternative way to control the pin input is to use the `RootProvider` component and the `usePinInput` hook. This way
you can access the state and methods from outside the component.

<Example id="root-provider" />

## API Reference

### Props

<ComponentTypes id="pin-input" />

### Context

<ContextType id="pin-input" />

## Accessibility

### Keyboard Support

<KeyBindingsTable id="pin-input" />
