PinInput

A sequence of one-character alphanumeric inputs.

Usage

Use the v-model directive to control the value of the PinInput.

<script setup lang="ts">
const value = ref([])
</script>

<template>
  <PPinInput v-model="value" />
</template>

Use the default-value prop to set the initial value when you do not need to control its state.

<template>
  <PPinInput :default-value="['1', '2', '3']" />
</template>

Type

Use the type prop to change the input type. Defaults to text.

type

<template>
  <PPinInput type="number" />
</template>

When type is set to number, it will only accept numeric characters.

Mask

Use the mask prop to treat the input like a password.

mask

<template>
  <PPinInput mask :default-value="['1', '2', '3', '4', '5']" />
</template>

Use the otp prop to enable One-Time Password functionality. When enabled, mobile devices can automatically detect and fill OTP codes from SMS messages or clipboard content, with autocomplete support.

otp

<template>
  <PPinInput otp />
</template>

Length

Use the length prop to change the amount of inputs.

length

<template>
  <PPinInput :length="6" />
</template>

Placeholder

Use the placeholder prop to set a placeholder text.

placeholder

<template>
  <PPinInput placeholder="○" />
</template>

Color

Use the color prop to change the ring color when the PinInput is focused.

color

highlight

<template>
  <PPinInput color="neutral" highlight placeholder="○" />
</template>

The highlight prop is used here to show the focus state. It's used internally when a validation error occurs.

Variant

Use the variant prop to change the variant of the PinInput.

color

variant

highlight

<template>
  <PPinInput color="neutral" variant="subtle" placeholder="○" />
</template>

Size

Use the size prop to change the size of the PinInput.

size

<template>
  <PPinInput size="xl" placeholder="○" />
</template>

Disabled

Use the disabled prop to disable the PinInput.

disabled

<template>
  <PPinInput disabled placeholder="○" />
</template>

API

Props

Prop	Default	Type
`as`	`'div'`	`any` The element or component this component should render as.
`color`	`'primary'`	`"primary" \| "secondary" \| "success" \| "info" \| "warning" \| "error" \| "neutral"`
`variant`	`'outline'`	`"outline" \| "soft" \| "subtle" \| "ghost" \| "none"`
`size`	`'md'`	`"md" \| "xs" \| "sm" \| "lg" \| "xl"`
`length`	`5`	`string \| number` The number of input fields.
`autofocus`		`boolean`
`autofocusDelay`	`0`	`number`
`highlight`		`boolean`
`defaultValue`		`APinInputValue<T>` The default value of the pin inputs when it is initially rendered. Use when you do not need to control its checked state.
`disabled`		`boolean` When `true`, prevents the user from interacting with the pin input
`id`		`string` Id of the element
`mask`		`boolean` When `true`, pin inputs will be treated as password.
`modelValue`		`null \| APinInputValue<T>` The controlled checked state of the pin input. Can be binded as `v-model`.
`name`		`string` The name of the field. Submitted with its owning form as part of a name/value pair.
`otp`		`boolean` When `true`, mobile devices will autodetect the OTP from messages or clipboard, and enable the autocomplete field.
`placeholder`		`string` The placeholder character to use for empty pin-inputs.
`required`		`boolean` When `true`, indicates that the user must set the value before the owning form can be submitted.
`type`	`'text'`	`T` Input type for the inputs.
`pohon`		`{ root?: ClassValue; base?: ClassValue; }`

Emits

Event	Type
`update:modelValue`	`[value: APinInputValue<T>]`
`complete`	`[value: APinInputValue<T>]`
`change`	`[event: Event]`
`blur`	`[event: Event]`

Expose

When accessing the component via a template ref, you can use the following:

Name	Type
`inputsRef`	`Ref<ComponentPublicInstance[]>`

Theme

We use unocss-variants to customize the theme. Read more about it in the theming guide.

Below is the theme configuration skeleton for the PPinInput. Since the component is provided unstyled by default, you will need to fill in these values to apply your own custom look and feel. If you prefer to use our pre-built, opinionated styling, you can instead use our UnoCSS preset, this docs is using it as well.

app.config.ts

export default defineAppConfig({
  pohon: {
    pinInput: {
      slots: {
        root: '',
        base: ''
      },
      variants: {
        size: {
          xs: {
            base: ''
          },
          sm: {
            base: ''
          },
          md: {
            base: ''
          },
          lg: {
            base: ''
          },
          xl: {
            base: ''
          }
        },
        variant: {
          outline: '',
          soft: '',
          subtle: '',
          ghost: '',
          none: ''
        },
        color: {
          primary: '',
          secondary: '',
          success: '',
          info: '',
          warning: '',
          error: '',
          neutral: ''
        },
        highlight: {
          true: ''
        }
      },
      compoundVariants: [],
      defaultVariants: {
        size: 'md',
        color: 'primary',
        variant: 'outline'
      }
    }
  }
};

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import pohon from 'pohon-ui/vite'

export default defineAppConfig({
  pohon: {
    pinInput: {
      slots: {
        root: '',
        base: ''
      },
      variants: {
        size: {
          xs: {
            base: ''
          },
          sm: {
            base: ''
          },
          md: {
            base: ''
          },
          lg: {
            base: ''
          },
          xl: {
            base: ''
          }
        },
        variant: {
          outline: '',
          soft: '',
          subtle: '',
          ghost: '',
          none: ''
        },
        color: {
          primary: '',
          secondary: '',
          success: '',
          info: '',
          warning: '',
          error: '',
          neutral: ''
        },
        highlight: {
          true: ''
        }
      },
      compoundVariants: [],
      defaultVariants: {
        size: 'md',
        color: 'primary',
        variant: 'outline'
      }
    }
  }
};

Akar

With Pohon UI, you can achieve similar component functionality with less code and effort, as it comes with built-in styles mechanism and behaviors that are optimized for common use cases. Since it's using unocss-variants it adds a runtime cost, but it can be worth it if you prioritize development speed and ease of use over fine-grained control.

If this is a deal breaker for you, you can always stick to using Akar and build your own custom components on top of it.

Changelog

No recent changes

InputTime

Enables users to input specific times within a designated field.

RadioGroup

A set of radio buttons to select a single option from a list.