# Pin Input

URL: https://ark-ui.com/docs/components/pin-input
Source: https://raw.githubusercontent.com/chakra-ui/ark/refs/heads/main/website/src/content/pages/components/pin-input.mdx

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: basic**

#### React

```tsx
import { PinInput } from '@ark-ui/react/pin-input'
import styles from 'styles/pin-input.module.css'

export const Basic = () => (
  <PinInput.Root className={styles.Root}>
    <PinInput.Label className={styles.Label}>Label</PinInput.Label>
    <PinInput.Control className={styles.Control}>
      {[0, 1, 2].map((id, index) => (
        <PinInput.Input key={id} index={index} className={styles.Input} />
      ))}
    </PinInput.Control>
    <PinInput.HiddenInput />
  </PinInput.Root>
)

```

#### Solid

```tsx
import { PinInput } from '@ark-ui/solid/pin-input'
import { Index } from 'solid-js'
import styles from 'styles/pin-input.module.css'

export const Basic = () => (
  <PinInput.Root class={styles.Root}>
    <PinInput.Label class={styles.Label}>Label</PinInput.Label>
    <PinInput.Control class={styles.Control}>
      <Index each={[0, 1, 2]}>{(id) => <PinInput.Input index={id()} class={styles.Input} />}</Index>
    </PinInput.Control>
    <PinInput.HiddenInput />
  </PinInput.Root>
)

```

#### Vue

```vue
<script setup lang="ts">
import { PinInput } from '@ark-ui/vue/pin-input'
import styles from 'styles/pin-input.module.css'
</script>

<template>
  <PinInput.Root :class="styles.Root">
    <PinInput.Label :class="styles.Label">Label</PinInput.Label>
    <PinInput.Control :class="styles.Control">
      <PinInput.Input v-for="id in [0, 1, 2]" :key="id" :index="id" :class="styles.Input" />
    </PinInput.Control>
    <PinInput.HiddenInput />
  </PinInput.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { PinInput } from '@ark-ui/svelte/pin-input'
  import styles from 'styles/pin-input.module.css'
</script>

<PinInput.Root class={styles.Root}>
  <PinInput.Label class={styles.Label}>Label</PinInput.Label>
  <PinInput.Control class={styles.Control}>
    {#each [0, 1, 2] as id, index (id)}
      <PinInput.Input {index} class={styles.Input} />
    {/each}
  </PinInput.Control>
  <PinInput.HiddenInput />
</PinInput.Root>

```

### Placeholder

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

**Example: custom-placeholder**

#### React

```tsx
import { PinInput } from '@ark-ui/react/pin-input'
import styles from 'styles/pin-input.module.css'

export const CustomPlaceholder = () => (
  <PinInput.Root className={styles.Root} placeholder="*">
    <PinInput.Label className={styles.Label}>Label</PinInput.Label>
    <PinInput.Control className={styles.Control}>
      {[0, 1, 2].map((id, index) => (
        <PinInput.Input key={id} index={index} className={styles.Input} />
      ))}
    </PinInput.Control>
    <PinInput.HiddenInput />
  </PinInput.Root>
)

```

#### Solid

```tsx
import { PinInput } from '@ark-ui/solid/pin-input'
import { Index } from 'solid-js'
import styles from 'styles/pin-input.module.css'

export const CustomPlaceholder = () => (
  <PinInput.Root class={styles.Root} placeholder="*">
    <PinInput.Label class={styles.Label}>Label</PinInput.Label>
    <PinInput.Control class={styles.Control}>
      <Index each={[0, 1, 2]}>{(id) => <PinInput.Input index={id()} class={styles.Input} />}</Index>
    </PinInput.Control>
    <PinInput.HiddenInput />
  </PinInput.Root>
)

```

#### Vue

```vue
<script setup lang="ts">
import { PinInput } from '@ark-ui/vue/pin-input'
import styles from 'styles/pin-input.module.css'
</script>

<template>
  <PinInput.Root :class="styles.Root" placeholder="*">
    <PinInput.Label :class="styles.Label">Label</PinInput.Label>
    <PinInput.Control :class="styles.Control">
      <PinInput.Input v-for="id in [0, 1, 2]" :key="id" :index="id" :class="styles.Input" />
    </PinInput.Control>
    <PinInput.HiddenInput />
  </PinInput.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { PinInput } from '@ark-ui/svelte/pin-input'
  import styles from 'styles/pin-input.module.css'
</script>

<PinInput.Root class={styles.Root} placeholder="*">
  <PinInput.Label class={styles.Label}>Label</PinInput.Label>
  <PinInput.Control class={styles.Control}>
    {#each [0, 1, 2] as id, index (id)}
      <PinInput.Input {index} class={styles.Input} />
    {/each}
  </PinInput.Control>
  <PinInput.HiddenInput />
</PinInput.Root>

```

### 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: blur-on-complete**

#### React

```tsx
import { PinInput } from '@ark-ui/react/pin-input'
import styles from 'styles/pin-input.module.css'

export const BlurOnComplete = () => (
  <PinInput.Root className={styles.Root} blurOnComplete>
    <PinInput.Label className={styles.Label}>Label</PinInput.Label>
    <PinInput.Control className={styles.Control}>
      {[0, 1, 2].map((id, index) => (
        <PinInput.Input key={id} index={index} className={styles.Input} />
      ))}
    </PinInput.Control>
    <PinInput.HiddenInput />
  </PinInput.Root>
)

```

#### Solid

```tsx
import { PinInput } from '@ark-ui/solid/pin-input'
import { Index } from 'solid-js'
import styles from 'styles/pin-input.module.css'

export const BlurOnComplete = () => (
  <PinInput.Root class={styles.Root} blurOnComplete>
    <PinInput.Label class={styles.Label}>Label</PinInput.Label>
    <PinInput.Control class={styles.Control}>
      <Index each={[0, 1, 2]}>{(id) => <PinInput.Input index={id()} class={styles.Input} />}</Index>
    </PinInput.Control>
    <PinInput.HiddenInput />
  </PinInput.Root>
)

```

#### Vue

```vue
<script setup lang="ts">
import { PinInput } from '@ark-ui/vue/pin-input'
import styles from 'styles/pin-input.module.css'
</script>

<template>
  <PinInput.Root :class="styles.Root" blurOnComplete>
    <PinInput.Label :class="styles.Label">Label</PinInput.Label>
    <PinInput.Control :class="styles.Control">
      <PinInput.Input v-for="id in [0, 1, 2]" :key="id" :index="id" :class="styles.Input" />
    </PinInput.Control>
    <PinInput.HiddenInput />
  </PinInput.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { PinInput } from '@ark-ui/svelte/pin-input'
  import styles from 'styles/pin-input.module.css'
</script>

<PinInput.Root class={styles.Root} blurOnComplete>
  <PinInput.Label class={styles.Label}>Label</PinInput.Label>
  <PinInput.Control class={styles.Control}>
    {#each [0, 1, 2] as id, index (id)}
      <PinInput.Input {index} class={styles.Input} />
    {/each}
  </PinInput.Control>
  <PinInput.HiddenInput />
</PinInput.Root>

```

### 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: otp-mode**

#### React

```tsx
import { PinInput } from '@ark-ui/react/pin-input'
import styles from 'styles/pin-input.module.css'

export const OTPMode = () => (
  <PinInput.Root className={styles.Root} otp>
    <PinInput.Label className={styles.Label}>Label</PinInput.Label>
    <PinInput.Control className={styles.Control}>
      {[0, 1, 2].map((id, index) => (
        <PinInput.Input key={id} index={index} className={styles.Input} />
      ))}
    </PinInput.Control>
    <PinInput.HiddenInput />
  </PinInput.Root>
)

```

#### Solid

```tsx
import { PinInput } from '@ark-ui/solid/pin-input'
import { Index } from 'solid-js'
import styles from 'styles/pin-input.module.css'

export const OTPMode = () => (
  <PinInput.Root class={styles.Root} otp>
    <PinInput.Label class={styles.Label}>Label</PinInput.Label>
    <PinInput.Control class={styles.Control}>
      <Index each={[0, 1, 2]}>{(id) => <PinInput.Input index={id()} class={styles.Input} />}</Index>
    </PinInput.Control>
    <PinInput.HiddenInput />
  </PinInput.Root>
)

```

#### Vue

```vue
<script setup lang="ts">
import { PinInput } from '@ark-ui/vue/pin-input'
import styles from 'styles/pin-input.module.css'
</script>

<template>
  <PinInput.Root :class="styles.Root" otp>
    <PinInput.Label :class="styles.Label">Label</PinInput.Label>
    <PinInput.Control :class="styles.Control">
      <PinInput.Input v-for="id in [0, 1, 2]" :key="id" :index="id" :class="styles.Input" />
    </PinInput.Control>
    <PinInput.HiddenInput />
  </PinInput.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { PinInput } from '@ark-ui/svelte/pin-input'
  import styles from 'styles/pin-input.module.css'
</script>

<PinInput.Root class={styles.Root} otp>
  <PinInput.Label class={styles.Label}>Label</PinInput.Label>
  <PinInput.Control class={styles.Control}>
    {#each [0, 1, 2] as id, index (id)}
      <PinInput.Input {index} class={styles.Input} />
    {/each}
  </PinInput.Control>
  <PinInput.HiddenInput />
</PinInput.Root>

```

### 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: mask**

#### React

```tsx
import { PinInput } from '@ark-ui/react/pin-input'
import styles from 'styles/pin-input.module.css'

export const Mask = () => (
  <PinInput.Root className={styles.Root} mask>
    <PinInput.Label className={styles.Label}>Label</PinInput.Label>
    <PinInput.Control className={styles.Control}>
      {[0, 1, 2].map((id, index) => (
        <PinInput.Input key={id} index={index} className={styles.Input} />
      ))}
    </PinInput.Control>
    <PinInput.HiddenInput />
  </PinInput.Root>
)

```

#### Solid

```tsx
import { PinInput } from '@ark-ui/solid/pin-input'
import { Index } from 'solid-js'
import styles from 'styles/pin-input.module.css'

export const Mask = () => (
  <PinInput.Root class={styles.Root} mask>
    <PinInput.Label class={styles.Label}>Label</PinInput.Label>
    <PinInput.Control class={styles.Control}>
      <Index each={[0, 1, 2]}>{(id) => <PinInput.Input index={id()} class={styles.Input} />}</Index>
    </PinInput.Control>
    <PinInput.HiddenInput />
  </PinInput.Root>
)

```

#### Vue

```vue
<script setup lang="ts">
import { PinInput } from '@ark-ui/vue/pin-input'
import styles from 'styles/pin-input.module.css'
</script>

<template>
  <PinInput.Root :class="styles.Root" mask>
    <PinInput.Label :class="styles.Label">Label</PinInput.Label>
    <PinInput.Control :class="styles.Control">
      <PinInput.Input v-for="id in [0, 1, 2]" :key="id" :index="id" :class="styles.Input" />
    </PinInput.Control>
    <PinInput.HiddenInput />
  </PinInput.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { PinInput } from '@ark-ui/svelte/pin-input'
  import styles from 'styles/pin-input.module.css'
</script>

<PinInput.Root class={styles.Root} mask>
  <PinInput.Label class={styles.Label}>Label</PinInput.Label>
  <PinInput.Control class={styles.Control}>
    {#each [0, 1, 2] as id, index (id)}
      <PinInput.Input {index} class={styles.Input} />
    {/each}
  </PinInput.Control>
  <PinInput.HiddenInput />
</PinInput.Root>

```

### 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: with-field**

#### React

```tsx
import { Field } from '@ark-ui/react/field'
import { PinInput } from '@ark-ui/react/pin-input'
import fieldStyles from 'styles/field.module.css'
import styles from 'styles/pin-input.module.css'

export const WithField = () => (
  <Field.Root className={fieldStyles.Root}>
    <PinInput.Root className={styles.Root}>
      <PinInput.Label className={styles.Label}>Label</PinInput.Label>
      <PinInput.Control className={styles.Control}>
        {[0, 1, 2].map((id, index) => (
          <PinInput.Input key={id} index={index} className={styles.Input} />
        ))}
      </PinInput.Control>
      <PinInput.HiddenInput />
    </PinInput.Root>
    <Field.HelperText className={fieldStyles.HelperText}>Additional Info</Field.HelperText>
    <Field.ErrorText className={fieldStyles.ErrorText}>Error Info</Field.ErrorText>
  </Field.Root>
)

```

#### Solid

```tsx
import { Field } from '@ark-ui/solid/field'
import { PinInput } from '@ark-ui/solid/pin-input'
import { Index } from 'solid-js'
import fieldStyles from 'styles/field.module.css'
import styles from 'styles/pin-input.module.css'

export const WithField = () => (
  <Field.Root class={fieldStyles.Root}>
    <PinInput.Root class={styles.Root}>
      <PinInput.Label class={styles.Label}>Label</PinInput.Label>
      <PinInput.Control class={styles.Control}>
        <Index each={[0, 1, 2]}>{(id) => <PinInput.Input index={id()} class={styles.Input} />}</Index>
      </PinInput.Control>
      <PinInput.HiddenInput />
    </PinInput.Root>
    <Field.HelperText class={fieldStyles.HelperText}>Additional Info</Field.HelperText>
    <Field.ErrorText class={fieldStyles.ErrorText}>Error Info</Field.ErrorText>
  </Field.Root>
)

```

#### Vue

```vue
<script setup lang="ts">
import { Field } from '@ark-ui/vue/field'
import { PinInput } from '@ark-ui/vue/pin-input'
import fieldStyles from 'styles/field.module.css'
import styles from 'styles/pin-input.module.css'
</script>

<template>
  <Field.Root :class="fieldStyles.Root">
    <PinInput.Root :class="styles.Root">
      <PinInput.Label :class="styles.Label">Label</PinInput.Label>
      <PinInput.Control :class="styles.Control">
        <PinInput.Input v-for="id in [0, 1, 2]" :key="id" :index="id" :class="styles.Input" />
      </PinInput.Control>
      <PinInput.HiddenInput />
    </PinInput.Root>
    <Field.HelperText :class="fieldStyles.HelperText">Additional Info</Field.HelperText>
    <Field.ErrorText :class="fieldStyles.ErrorText">Error Info</Field.ErrorText>
  </Field.Root>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { Field } from '@ark-ui/svelte/field'
  import { PinInput } from '@ark-ui/svelte/pin-input'
  import fieldStyles from 'styles/field.module.css'
  import styles from 'styles/pin-input.module.css'
</script>

<Field.Root class={fieldStyles.Root}>
  <PinInput.Root class={styles.Root}>
    <PinInput.Label class={styles.Label}>Label</PinInput.Label>
    <PinInput.Control class={styles.Control}>
      {#each [0, 1, 2] as id, index (id)}
        <PinInput.Input {index} class={styles.Input} />
      {/each}
    </PinInput.Control>
    <PinInput.HiddenInput />
  </PinInput.Root>
  <Field.HelperText class={fieldStyles.HelperText}>Additional Info</Field.HelperText>
  <Field.ErrorText class={fieldStyles.ErrorText}>Error Info</Field.ErrorText>
</Field.Root>

```

### 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: root-provider**

#### React

```tsx
import { PinInput, usePinInput } from '@ark-ui/react/pin-input'
import styles from 'styles/pin-input.module.css'

export const RootProvider = () => {
  const pinInput = usePinInput({ onValueComplete: (e) => alert(e.valueAsString) })

  return (
    <div className="stack">
      <button onClick={() => pinInput.focus()}>Focus</button>

      <PinInput.RootProvider value={pinInput} className={styles.Root}>
        <PinInput.Label className={styles.Label}>Label</PinInput.Label>
        <PinInput.Control className={styles.Control}>
          {[0, 1, 2].map((id, index) => (
            <PinInput.Input key={id} index={index} className={styles.Input} />
          ))}
        </PinInput.Control>
        <PinInput.HiddenInput />
      </PinInput.RootProvider>
    </div>
  )
}

```

#### Solid

```tsx
import { PinInput, usePinInput } from '@ark-ui/solid/pin-input'
import { Index } from 'solid-js'
import styles from 'styles/pin-input.module.css'

export const RootProvider = () => {
  const pinInput = usePinInput({ onValueComplete: (e) => alert(e.valueAsString) })

  return (
    <div class="stack">
      <button onClick={() => pinInput().focus()}>Focus</button>

      <PinInput.RootProvider value={pinInput} class={styles.Root}>
        <PinInput.Label class={styles.Label}>Label</PinInput.Label>
        <PinInput.Control class={styles.Control}>
          <Index each={[0, 1, 2]}>{(id) => <PinInput.Input index={id()} class={styles.Input} />}</Index>
        </PinInput.Control>
        <PinInput.HiddenInput />
      </PinInput.RootProvider>
    </div>
  )
}

```

#### Vue

```vue
<script setup lang="ts">
import { PinInput, usePinInput } from '@ark-ui/vue/pin-input'
import styles from 'styles/pin-input.module.css'

const pinInput = usePinInput()
</script>

<template>
  <div class="stack">
    <button @click="pinInput.focus()">Focus</button>

    <PinInput.RootProvider :value="pinInput" :class="styles.Root">
      <PinInput.Label :class="styles.Label">Label</PinInput.Label>
      <PinInput.Control :class="styles.Control">
        <PinInput.Input v-for="id in [0, 1, 2]" :key="id" :index="id" :class="styles.Input" />
      </PinInput.Control>
      <PinInput.HiddenInput />
    </PinInput.RootProvider>
  </div>
</template>

```

#### Svelte

```svelte
<script lang="ts">
  import { PinInput, usePinInput } from '@ark-ui/svelte/pin-input'
  import styles from 'styles/pin-input.module.css'

  const id = $props.id()

  const pinInput = usePinInput({ id, onValueComplete: (e) => alert(e.valueAsString) })
</script>

<div class="stack">
  <button onclick={() => pinInput().focus()}>Focus</button>

  <PinInput.RootProvider value={pinInput} class={styles.Root}>
    <PinInput.Label class={styles.Label}>Label</PinInput.Label>
    <PinInput.Control class={styles.Control}>
      {#each [0, 1, 2] as id, index (id)}
        <PinInput.Input {index} class={styles.Input} />
      {/each}
    </PinInput.Control>
    <PinInput.HiddenInput />
  </PinInput.RootProvider>
</div>

```

## API Reference

### Props

**Component API Reference**

#### React

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `autoFocus` | `boolean` | No | Whether to auto-focus the first input. |
| `blurOnComplete` | `boolean` | No | Whether to blur the input when the value is complete |
| `count` | `number` | No | The number of inputs to render to improve SSR aria attributes.
This will be required in next major version. |
| `defaultValue` | `string[]` | No | The initial value of the the pin input when rendered.
Use when you don't need to control the value of the pin input. |
| `disabled` | `boolean` | No | Whether the inputs are disabled |
| `form` | `string` | No | The associate form of the underlying input element. |
| `id` | `string` | No | The unique identifier of the machine. |
| `ids` | `Partial<{
  root: string
  hiddenInput: string
  label: string
  control: string
  input: (id: string) => string
}>` | No | The ids of the elements in the pin input. Useful for composition. |
| `invalid` | `boolean` | No | Whether the pin input is in the invalid state |
| `mask` | `boolean` | No | If `true`, the input's value will be masked just like `type=password` |
| `name` | `string` | No | The name of the input element. Useful for form submission. |
| `onValueChange` | `(details: ValueChangeDetails) => void` | No | Function called on input change |
| `onValueComplete` | `(details: ValueChangeDetails) => void` | No | Function called when all inputs have valid values |
| `onValueInvalid` | `(details: ValueInvalidDetails) => void` | No | Function called when an invalid value is entered |
| `otp` | `boolean` | No | If `true`, the pin input component signals to its fields that they should
use `autocomplete="one-time-code"`. |
| `pattern` | `string` | No | The regular expression that the user-entered input value is checked against. |
| `placeholder` | `string` | No | The placeholder text for the input |
| `readOnly` | `boolean` | No | Whether the pin input is in the valid state |
| `required` | `boolean` | No | Whether the pin input is required |
| `selectOnFocus` | `boolean` | No | Whether to select input value when input is focused |
| `translations` | `IntlTranslations` | No | Specifies the localized strings that identifies the accessibility elements and their states |
| `type` | `'numeric' | 'alphanumeric' | 'alphabetic'` | No | The type of value the pin-input should allow |
| `value` | `string[]` | No | The controlled value of the the pin input. |


**Root Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | pin-input |
| `[data-part]` | root |
| `[data-invalid]` | Present when invalid |
| `[data-disabled]` | Present when disabled |
| `[data-complete]` | Present when the pin-input value is complete |
| `[data-readonly]` | Present when read-only |


**Control Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**HiddenInput Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Input Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `index` | `number` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Input Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | pin-input |
| `[data-part]` | input |
| `[data-disabled]` | Present when disabled |
| `[data-complete]` | Present when the input value is complete |
| `[data-index]` | The index of the item |
| `[data-invalid]` | Present when invalid |


**Label Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Label Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | pin-input |
| `[data-part]` | label |
| `[data-invalid]` | Present when invalid |
| `[data-disabled]` | Present when disabled |
| `[data-complete]` | Present when the label value is complete |
| `[data-required]` | Present when required |
| `[data-readonly]` | Present when read-only |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UsePinInputReturn` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


#### Solid

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `autoFocus` | `boolean` | No | Whether to auto-focus the first input. |
| `blurOnComplete` | `boolean` | No | Whether to blur the input when the value is complete |
| `count` | `number` | No | The number of inputs to render to improve SSR aria attributes.
This will be required in next major version. |
| `defaultValue` | `string[]` | No | The initial value of the the pin input when rendered.
Use when you don't need to control the value of the pin input. |
| `disabled` | `boolean` | No | Whether the inputs are disabled |
| `form` | `string` | No | The associate form of the underlying input element. |
| `ids` | `Partial<{
  root: string
  hiddenInput: string
  label: string
  control: string
  input: (id: string) => string
}>` | No | The ids of the elements in the pin input. Useful for composition. |
| `invalid` | `boolean` | No | Whether the pin input is in the invalid state |
| `mask` | `boolean` | No | If `true`, the input's value will be masked just like `type=password` |
| `name` | `string` | No | The name of the input element. Useful for form submission. |
| `onValueChange` | `(details: ValueChangeDetails) => void` | No | Function called on input change |
| `onValueComplete` | `(details: ValueChangeDetails) => void` | No | Function called when all inputs have valid values |
| `onValueInvalid` | `(details: ValueInvalidDetails) => void` | No | Function called when an invalid value is entered |
| `otp` | `boolean` | No | If `true`, the pin input component signals to its fields that they should
use `autocomplete="one-time-code"`. |
| `pattern` | `string` | No | The regular expression that the user-entered input value is checked against. |
| `placeholder` | `string` | No | The placeholder text for the input |
| `readOnly` | `boolean` | No | Whether the pin input is in the valid state |
| `required` | `boolean` | No | Whether the pin input is required |
| `selectOnFocus` | `boolean` | No | Whether to select input value when input is focused |
| `translations` | `IntlTranslations` | No | Specifies the localized strings that identifies the accessibility elements and their states |
| `type` | `'numeric' | 'alphanumeric' | 'alphabetic'` | No | The type of value the pin-input should allow |
| `value` | `string[]` | No | The controlled value of the the pin input. |


**Root Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | pin-input |
| `[data-part]` | root |
| `[data-invalid]` | Present when invalid |
| `[data-disabled]` | Present when disabled |
| `[data-complete]` | Present when the pin-input value is complete |
| `[data-readonly]` | Present when read-only |


**Control Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**HiddenInput Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'input'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Input Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `index` | `number` | Yes |  |
| `asChild` | `(props: ParentProps<'input'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Input Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | pin-input |
| `[data-part]` | input |
| `[data-disabled]` | Present when disabled |
| `[data-complete]` | Present when the input value is complete |
| `[data-index]` | The index of the item |
| `[data-invalid]` | Present when invalid |


**Label Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `(props: ParentProps<'label'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Label Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | pin-input |
| `[data-part]` | label |
| `[data-invalid]` | Present when invalid |
| `[data-disabled]` | Present when disabled |
| `[data-complete]` | Present when the label value is complete |
| `[data-required]` | Present when required |
| `[data-readonly]` | Present when read-only |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UsePinInputReturn` | Yes |  |
| `asChild` | `(props: ParentProps<'div'>) => Element` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


#### Vue

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `autoFocus` | `boolean` | No | Whether to auto-focus the first input. |
| `blurOnComplete` | `boolean` | No | Whether to blur the input when the value is complete |
| `count` | `number` | No | The number of inputs to render to improve SSR aria attributes.
This will be required in next major version. |
| `defaultValue` | `string[]` | No | The initial value of the the pin input when rendered.
Use when you don't need to control the value of the pin input. |
| `disabled` | `boolean` | No | Whether the inputs are disabled |
| `form` | `string` | No | The associate form of the underlying input element. |
| `id` | `string` | No | The unique identifier of the machine. |
| `ids` | `Partial<{
  root: string
  hiddenInput: string
  label: string
  control: string
  input(id: string): string
}>` | No | The ids of the elements in the pin input. Useful for composition. |
| `invalid` | `boolean` | No | Whether the pin input is in the invalid state |
| `mask` | `boolean` | No | If `true`, the input's value will be masked just like `type=password` |
| `modelValue` | `string[]` | No | The v-model value of the pin input |
| `name` | `string` | No | The name of the input element. Useful for form submission. |
| `otp` | `boolean` | No | If `true`, the pin input component signals to its fields that they should
use `autocomplete="one-time-code"`. |
| `pattern` | `string` | No | The regular expression that the user-entered input value is checked against. |
| `placeholder` | `string` | No | The placeholder text for the input |
| `readOnly` | `boolean` | No | Whether the pin input is in the valid state |
| `required` | `boolean` | No | Whether the pin input is required |
| `selectOnFocus` | `boolean` | No | Whether to select input value when input is focused |
| `translations` | `IntlTranslations` | No | Specifies the localized strings that identifies the accessibility elements and their states |
| `type` | `'numeric' | 'alphanumeric' | 'alphabetic'` | No | The type of value the pin-input should allow |


**Root Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | pin-input |
| `[data-part]` | root |
| `[data-invalid]` | Present when invalid |
| `[data-disabled]` | Present when disabled |
| `[data-complete]` | Present when the pin-input value is complete |
| `[data-readonly]` | Present when read-only |


**Control Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**HiddenInput Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Input Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `index` | `number` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Input Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | pin-input |
| `[data-part]` | input |
| `[data-disabled]` | Present when disabled |
| `[data-complete]` | Present when the input value is complete |
| `[data-index]` | The index of the item |
| `[data-invalid]` | Present when invalid |


**Label Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


**Label Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | pin-input |
| `[data-part]` | label |
| `[data-invalid]` | Present when invalid |
| `[data-disabled]` | Present when disabled |
| `[data-complete]` | Present when the label value is complete |
| `[data-required]` | Present when required |
| `[data-readonly]` | Present when read-only |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `PinInputApi<PropTypes>` | Yes |  |
| `asChild` | `boolean` | No | Use the provided child element as the default rendered element, combining their props and behavior. |


#### Svelte

**Root Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `autoFocus` | `boolean` | No | Whether to auto-focus the first input. |
| `blurOnComplete` | `boolean` | No | Whether to blur the input when the value is complete |
| `count` | `number` | No | The number of inputs to render to improve SSR aria attributes.
This will be required in next major version. |
| `defaultValue` | `string[]` | No | The initial value of the the pin input when rendered.
Use when you don't need to control the value of the pin input. |
| `disabled` | `boolean` | No | Whether the inputs are disabled |
| `form` | `string` | No | The associate form of the underlying input element. |
| `id` | `string` | No | The unique identifier of the machine. |
| `ids` | `Partial<{
  root: string
  hiddenInput: string
  label: string
  control: string
  input: (id: string) => string
}>` | No | The ids of the elements in the pin input. Useful for composition. |
| `invalid` | `boolean` | No | Whether the pin input is in the invalid state |
| `mask` | `boolean` | No | If `true`, the input's value will be masked just like `type=password` |
| `name` | `string` | No | The name of the input element. Useful for form submission. |
| `onValueChange` | `(details: ValueChangeDetails) => void` | No | Function called on input change |
| `onValueComplete` | `(details: ValueChangeDetails) => void` | No | Function called when all inputs have valid values |
| `onValueInvalid` | `(details: ValueInvalidDetails) => void` | No | Function called when an invalid value is entered |
| `otp` | `boolean` | No | If `true`, the pin input component signals to its fields that they should
use `autocomplete="one-time-code"`. |
| `pattern` | `string` | No | The regular expression that the user-entered input value is checked against. |
| `placeholder` | `string` | No | The placeholder text for the input |
| `readOnly` | `boolean` | No | Whether the pin input is in the valid state |
| `ref` | `Element` | No |  |
| `required` | `boolean` | No | Whether the pin input is required |
| `selectOnFocus` | `boolean` | No | Whether to select input value when input is focused |
| `translations` | `IntlTranslations` | No | Specifies the localized strings that identifies the accessibility elements and their states |
| `type` | `'numeric' | 'alphanumeric' | 'alphabetic'` | No | The type of value the pin-input should allow |
| `value` | `string[]` | No | The controlled value of the the pin input. |


**Root Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | pin-input |
| `[data-part]` | root |
| `[data-invalid]` | Present when invalid |
| `[data-disabled]` | Present when disabled |
| `[data-complete]` | Present when the pin-input value is complete |
| `[data-readonly]` | Present when read-only |


**Context Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `render` | `Snippet<[UsePinInputContext]>` | No |  |


**Control Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**HiddenInput Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'input'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Input Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `index` | `number` | Yes |  |
| `asChild` | `Snippet<[PropsFn<'input'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Input Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | pin-input |
| `[data-part]` | input |
| `[data-disabled]` | Present when disabled |
| `[data-complete]` | Present when the input value is complete |
| `[data-index]` | The index of the item |
| `[data-invalid]` | Present when invalid |


**Label Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `asChild` | `Snippet<[PropsFn<'label'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


**Label Data Attributes:**

| Attribute | Value |
|-----------|-------|
| `[data-scope]` | pin-input |
| `[data-part]` | label |
| `[data-invalid]` | Present when invalid |
| `[data-disabled]` | Present when disabled |
| `[data-complete]` | Present when the label value is complete |
| `[data-required]` | Present when required |
| `[data-readonly]` | Present when read-only |


**RootProvider Props:**

| Prop | Type | Required | Description |
|------|------|----------|-------------|
| `value` | `UsePinInputReturn` | Yes |  |
| `asChild` | `Snippet<[PropsFn<'div'>]>` | No | Use the provided child element as the default rendered element, combining their props and behavior. |
| `ref` | `Element` | No |  |


### Context

**API:**

| Property | Type | Description |
|----------|------|-------------|
| `value` | `string[]` | The value of the input as an array of strings. |
| `valueAsString` | `string` | The value of the input as a string. |
| `complete` | `boolean` | Whether all inputs are filled. |
| `count` | `number` | The number of inputs to render |
| `items` | `number[]` | The array of input values. |
| `setValue` | `(value: string[]) => void` | Function to set the value of the inputs. |
| `clearValue` | `VoidFunction` | Function to clear the value of the inputs. |
| `setValueAtIndex` | `(index: number, value: string) => void` | Function to set the value of the input at a specific index. |
| `focus` | `VoidFunction` | Function to focus the pin-input. This will focus the first input. |


## Accessibility

### Keyboard Support

<KeyBindingsTable id="pin-input" />