Pin Input
Alpha<script setup lang="ts">
import { ref } from 'vue'
import { Label, PinInputInput, PinInputRoot } from 'radix-vue'
const value = ref<string[]>([])
function handleComplete(e: string[]) {
// eslint-disable-next-line no-alert
alert(e.join(''))
}
</script>
<template>
<div>
<Label
for="pin-input"
class="text-white"
>Pin Input</Label>
<PinInputRoot
id="pin-input"
v-model="value"
placeholder="○"
class="flex gap-2 items-center mt-1"
@complete="handleComplete"
>
<PinInputInput
v-for="(id, index) in 5"
:key="id"
:index="index"
class="w-10 h-10 bg-white rounded text-center shadow-lg text-green10 placeholder:text-mauve8 focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-white"
/>
</PinInputRoot>
</div>
</template>
Features
- Full keyboard navigation.
- Can be controlled or uncontrolled.
- Supports pasting from clipboard
- Emit event when inputs were filled.
Installation
Install the component from your command line.
$ npm add radix-vue
Anatomy
Import all parts and piece them together.
<script setup>
import { PinInputInput, PinInputRoot } from 'radix-vue'
</script>
<template>
<PinInputRoot>
<PinInputInput />
</PinInputRoot>
</template>
API Reference
Root
Contains all the parts of a checkbox. An input
will also render when used within a form
to ensure events propagate correctly.
Prop | Default | Type |
---|---|---|
as | 'div' | AsTag | Component The element or component this component should render as. Can be overwrite by |
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. | |
defaultValue | string[] The default value of the pin inputs when it is initially rendered. Use when you do not need to control its checked state. | |
dir | 'ltr' | 'rtl' The reading direction of the combobox when applicable. | |
disabled | boolean When | |
id | string Id of the element | |
mask | boolean When | |
modelValue | string[] The controlled checked state of the pin input. Can be binded as | |
name | string The name of the pin input. Submitted with its owning form as part of a name/value pair. | |
otp | boolean When | |
placeholder | '' | string The placeholder character to use for empty pin-inputs. |
required | boolean When | |
type | 'text' | 'number' | 'text' Input type for the inputs. |
Emit | Payload |
---|---|
complete | [value: string[]] |
update:modelValue | [value: string[]] Event handler called when the value changes. |
Slots (default) | Payload |
---|---|
modelValue | string[] Current input values |
Data Attribute | Value |
---|---|
[data-complete] | Present when completed |
[data-disabled] | Present when disabled |
Input
Input field for Pin Input. You can add as many input as you like.
Prop | Default | Type |
---|---|---|
as | 'input' | AsTag | Component The element or component this component should render as. Can be overwrite by |
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. | |
disabled | boolean When | |
index* | number Position of the value this input binds to. |
Data Attribute | Value |
---|---|
[data-complete] | Present when completed |
[data-disabled] | Present when disabled |
Examples
OTP mode
You can set the pin input to otp
mode by setting otp to true
.
<script setup lang="ts">
import { Label, PinInputInput, PinInputRoot } from 'radix-vue'
</script>
<template>
<PinInputRoot v-model="value" otp>
…
</PinInputRoot>
</template>
Numeric mode
You can set the pin input to only accept number
type by setting type to number
.
<script setup lang="ts">
import { Label, PinInputInput, PinInputRoot } from 'radix-vue'
</script>
<template>
<PinInputRoot v-model="value" type="number">
…
</PinInputRoot>
</template>
Accessibility
Keyboard Interactions
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. |