Pin Input

Enter a short code across coordinated single-character fields.

Usage

Verification code

Enter a short numeric verification code one segment at a time.

<!-- Pin Input / Verification Code -->
<script setup lang="ts">
import { PinInputRoot, PinInputInput } from '@sectile/vue/pin-input'
</script>

<template>
  <PinInputRoot :length="6" label="Verification code">
    <PinInputInput v-for="index in 6" :key="index" :index="index - 1" />
  </PinInputRoot>
</template>

Custom length

Set the number of input cells to match the code format required by the service.

<!-- Pin Input / Custom Length -->
<script setup lang="ts">
import { PinInputRoot, PinInputInput } from '@sectile/vue/pin-input'
</script>

<template>
  <PinInputRoot :length="4" label="Four-digit PIN">
    <PinInputInput v-for="index in 4" :key="index" :index="index - 1" />
  </PinInputRoot>
</template>

Masked input

Hide entered characters when the code should not remain visible on screen.

<!-- Pin Input / Masked -->
<script setup lang="ts">
import { PinInputRoot, PinInputInput } from '@sectile/vue/pin-input'
</script>

<template>
  <PinInputRoot :length="6" mask label="Security code">
    <PinInputInput v-for="index in 6" :key="index" :index="index - 1" />
  </PinInputRoot>
</template>

Cell placeholders

Pass a placeholder to each input cell without storing it as part of the value.

<!-- Pin Input / Placeholders -->
<script setup lang="ts">
import { PinInputRoot, PinInputInput } from '@sectile/vue/pin-input'
</script>

<template>
  <PinInputRoot :length="6" label="Access code">
    <PinInputInput
      v-for="index in 6"
      :key="index"
      :index="index - 1"
      placeholder="○"
    />
  </PinInputRoot>
</template>

OTP autocomplete

Opt in to one-time-code autocomplete for a value that is intentionally an OTP.

<!-- Pin Input / Otp -->
<script setup lang="ts">
import { PinInputRoot, PinInputInput } from '@sectile/vue/pin-input'
</script>

<template>
  <PinInputRoot :length="6" :otp="true" label="One-time code">
    <PinInputInput v-for="index in 6" :key="index" :index="index - 1" />
  </PinInputRoot>
</template>

Readonly

Remain focusable for inspection while rejecting every mutation request.

<!-- Pin Input / Readonly -->
<script setup lang="ts">
import { PinInputRoot, PinInputInput } from '@sectile/vue/pin-input'
</script>

<template>
  <PinInputRoot :length="6" default-value="246810" readonly label="Assigned code">
    <PinInputInput v-for="index in 6" :key="index" :index="index - 1" />
  </PinInputRoot>
</template>

Disabled

Remove the control from keyboard and pointer interaction.

<!-- Pin Input / Disabled -->
<script setup lang="ts">
import { PinInputRoot, PinInputInput } from '@sectile/vue/pin-input'
</script>

<template>
  <PinInputRoot :length="6" default-value="593174" disabled label="Unavailable code">
    <PinInputInput v-for="index in 6" :key="index" :index="index - 1" />
  </PinInputRoot>
</template>

Controlled

Let the parent own the current value and apply accepted changes back to the component.

<!-- Pin Input / Controlled -->
<script setup lang="ts">
import { PinInputRoot, PinInputInput } from '@sectile/vue/pin-input'
import { ref } from 'vue'

const value = ref('')

</script>

<template>
  <PinInputRoot v-model="value" :length="6" label="Controlled code">
    <PinInputInput v-for="index in 6" :key="index" :index="index - 1" />
  </PinInputRoot>
  <p>Current value: {{ value || 'Empty' }}</p>
</template>

API

Vue package: @sectile/vue/pin-input

Components

PinInputRoot
PinInputInput

Props

`PinInputRootProps`

as: TypePrimitiveAsDefault'div'
Element or component rendered for this part.
asChild: TypebooleanDefaultfalse
Whether to merge this part into its single child instead of rendering a wrapper.
defaultValue: TypestringDefault''
Initial value used when the component owns its state.
disabled: TypebooleanDefaultfalse
Whether interaction is unavailable.
form: TypestringDefaultundefined
ID of the native form associated with the control.
label: TypestringDefault'PIN'
Accessible name announced for the control.
length: TypenumberDefault6
Number of coordinated character inputs.
mask: TypebooleanDefaultfalse
Whether entered characters use password-style masking.
modelValue: TypestringDefaultundefined
Current value when state is controlled by the parent.
name: TypestringDefaultundefined
Name used for native form submission.
otp: TypebooleanDefaultfalse
Whether to opt the first input into one-time-code autocomplete.
policies: TypePinInputPoliciesDefaultundefined
Behavior policies that customize validation, movement, or selection.
readonly: TypebooleanDefaultfalse
Whether the value can be inspected but not changed.
required: TypebooleanDefaultfalse
Whether the control must contain a valid value before submission.

`PinInputInputProps`

as: TypePrimitiveAsDefault'input'
Element or component rendered for this part.
asChild: TypebooleanDefaultfalse
Whether to merge this part into its single child instead of rendering a wrapper.
index: TypenumberDefaultRequired
Zero-based position of this part in its parent collection.

Slots

`PinInputRootSlotProps`

complete: Typeboolean
Whether every required character or step is complete.
disabled: Typeboolean
Whether interaction is unavailable.
readonly: Typeboolean
Whether the value can be inspected but not changed.
value: Typestring
Current value exposed by this contract.

`PinInputInputSlotProps`

character: Typestring
Character displayed by this input.
complete: Typeboolean
Whether every required character or step is complete.
disabled: Typeboolean
Whether interaction is unavailable.
index: Typenumber
Zero-based position in the parent collection.
readonly: Typeboolean
Whether the value can be inspected but not changed.
value: Typestring
Current value exposed by this contract.

Events

`PinInputRoot`

complete: Payloadstring
Emitted when every required segment is filled.
update:modelValue: Payloadstring
Emitted when the component requests a new controlled value.

Other types

`PinInputValueChangeHandler`

type PinInputValueChangeHandler = (value: string) => void

`PinInputCompleteHandler`

type PinInputCompleteHandler = (value: string) => void

Parts

Shared scope: [data-scope="pin-input"]. Combine it with a part selector to keep styles local to this component.

Part	Selector	Role	Extra attributes
`root`	`[data-part="root"]`	Defines the component boundary and owns its composed parts.	—
`input`	`[data-part="input"]`	Accepts the editable value or draft.	—

Keyboard interaction

Key	Behavior
`Arrow Left` / `Arrow Right`	Move between digit inputs.
`Backspace` / `Delete`	Clear a digit and preserve the expected cursor movement.
`Text input`	Accept valid characters and advance when the field is complete.

Accessibility

Each digit input has an independent accessible name and preserves a predictable focus order.

Pin Input ​

Usage ​

Verification code ​

Custom length ​

Masked input ​

Cell placeholders ​

OTP autocomplete ​

Readonly ​

Disabled ​

Controlled ​

API ​

Props ​

PinInputRootProps ​

PinInputInputProps ​

Slots ​

PinInputRootSlotProps ​

PinInputInputSlotProps ​

Events ​

PinInputRoot ​

Other types ​

PinInputValueChangeHandler ​

PinInputCompleteHandler ​

Parts ​

Keyboard interaction ​

Accessibility ​