The pin input component has been deprecated.

Lihat dokumentasi input otp untuk keterangan lebih lanjut.

Kalau yang Anda cari komponen pin input versi lama, keterangannya ada di arsip dokumentasi shadcn-vue.

Requirements

Semua dipasang otomatis oleh kliping add; tabel ini untuk Anda yang memasang manual atau memeriksa project.

Requirement	Value
Project	Vue 3.5+, Tailwind CSS v4, alias @ — disiapkan kliping init
npm packages	@lucide/vue@^1.31.0, @vueuse/core@^14.4.0, reka-ui@^2.10.3
Files	components/ui/pin-input/pin-input.vue components/ui/pin-input/pin-input-group.vue components/ui/pin-input/pin-input-separator.vue components/ui/pin-input/pin-input-slot.vue components/ui/pin-input/index.ts

Anatomy

Susunan bagiannya seperti dipakai di contoh-contoh di atas. Impor semua bagian dari satu tempat, lalu susun begini:

<PinInput>
  <PinInputGroup>
    <PinInputSlot />
  </PinInputGroup>
  <PinInputSeparator />
</PinInput>

API Reference

PinInput

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

Event	Payload	Description
@update:modelValue	[value: PinInputValue<Type>]	Emitted when the value changes.
@complete	[value: PinInputValue<Type>]	Emitted when every input is filled, with the full value.

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"pin-input"

PinInputGroup

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

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"pin-input-group"

PinInputSeparator

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

Slot	Props
#default	—

Data attribute	Value
[data-slot]	"pin-input-separator"

PinInputSlot

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

Data attribute	Value
[data-slot]	"pin-input-slot"

Keyboard Interactions

Perilaku keyboard-nya datang dari primitif Reka UI PinInput yang dipakai komponen ini, mengikuti pola WAI-ARIA.

Key	Description
ArrowLeft	Focus on previous input.
ArrowRight	Focus on next input.
Home	Focus on the first input.
End	Focus on the last input.
Backspace	Deletes the value of the current input. If the input is empty, moves to the previous input and deletes that value as well.
Delete	Deletes the value of the current input.
Ctrl + V	Pastes the contents of the clipboard into the pin input. If the number of characters in the clipboard equals exceeds the number of inputs, the contents are pasted from the first input. Otherwise, the contents are pasted from the current input onwards.

CSS Variables

Token tema yang dibaca komponen ini — ubah nilainya di CSS global (:root dan .dark, lihat Theming) untuk mengubah tampilannya tanpa menyentuh komponennya: --border, --destructive, --input, --radius, --ring.

Credits

Berasal dari shadcn-vue (MIT, Copyright (c) 2023 unovue). Rantai lengkapnya di Credits.