Preview

Installation

npx sigma-ui@latest add pin-input

Usage

<script setup lang="ts">
import { ref } from 'vue';
import {
  PinInput,
  PinInputGroup,
  PinInputInput,
} from '@/components/ui/pin-input';

const value = ref<string[]>([]);
</script>

<template>
  <PinInput
    v-model="value"
    @complete="(value) => console.log(value.join(''))"
  >
    <PinInputGroup>
      <PinInputInput
        v-for="(id, index) in 5"
        :key="id"
        :index="index"
      />
    </PinInputGroup>
  </PinInput>
</template>

• v-model is a string[] with one entry per input. The complete event fires when every input is filled.
• Set type="number" to accept digits only, and otp to enable one-time code autocomplete.

Examples

Controlled

Disabled

Separator

Form

API Reference

PinInput

Props

Prop	Type	Default
modelValue The controlled checked state of the pin input. Can be binded as v-model.	PinInputValue<Type> | null	[]
defaultValue The default value of the pin inputs when it is initially rendered. Use when you do not need to control its checked state.	PinInputValue<Type>	-
placeholder The placeholder character to use for empty pin-inputs.	string	-
mask When true, pin inputs will be treated as password.	boolean	-
otp When true, mobile devices will autodetect the OTP from messages or clipboard, and enable the autocomplete field.	boolean	-
type Input type for the inputs.	Type	-
dir The reading direction of the combobox when applicable. <br> If omitted, inherits globally from ConfigProvider or assumes LTR (left-to-right) reading mode.	Direction	-
disabled When true, prevents the user from interacting with the pin input	boolean	-
id Id of the element	string	-
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"
name The name of the field. Submitted with its owning form as part of a name/value pair.	string	-
required When true, indicates that the user must set the value before the owning form can be submitted.	boolean	-

Events

Event	Payload
update:modelValue	[value: PinInputValue<Type>]
complete	[value: PinInputValue<Type>]

Slots

Slot	Scope
default The content of the component.	-

PinInputGroup

Props

Prop	Type	Default
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Slots

Slot	Scope
default The content of the component.	-

PinInputSeparator

Props

Prop	Type	Default
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Slots

Slot	Scope
default The content of the component.	-

PinInputInput

Props

Prop	Type	Default
indexrequired Position of the value this input binds to.	number	-
disabled When true, prevents the user from interacting with the pin input	boolean	-
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"

Accessibility

Renders a group of native text inputs. Reka UI moves focus between them as you type, delete, or paste.

Key	Description
ArrowLeft	Moves focus to the previous input.
ArrowRight	Moves focus to the next input.
Home	Moves focus to the first input.
End	Moves focus to the last input.
Backspace	Deletes the value of the current input. If it is empty, moves to the previous input and deletes its value.
Delete	Deletes the value of the current input.
Ctrl + V	Pastes the clipboard into the inputs, starting from the first input when it fills all of them, or from the current input otherwise.