v2.8.0

PinInput

A PIN code input component.
GitHub
Demo
Nuxt UI
PinInput avatarPinInput

Usage

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

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

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

<script setup lang="ts">
import { ref } from 'vue'

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

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

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

<template>
  <B24PinInput
    :default-value="{
      '0': '1',
      '1': '2',
      '2': '3'
    }"
  />
</template>

Type

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

<template>
  <B24PinInput 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.

<template>
  <B24PinInput
    mask
    :default-value="{
      '0': '1',
      '1': '2',
      '2': '3',
      '3': '4',
      '4': '5'
    }"
  />
</template>

OTP

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.

<template>
  <B24PinInput otp />
</template>

Length

Use the length prop to change the amount of inputs.

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

Placeholder

Use the placeholder prop to set a placeholder text.

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

Separator

Use the separator prop to insert a separator between groups of inputs. Pass a number to insert one after every Nth input.

<template>
  <B24PinInput :length="6" :separator="3" placeholder="○" />
</template>

You can also pass an array of positions to insert separators after specific inputs.

<template>
  <B24PinInput
    :length="7"
    :separator="{
      '0': 3,
      '1': 4
    }"
    placeholder="○"
  />
</template>

Color

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

<template>
  <B24PinInput color="air-primary" highlight placeholder="○" />
</template>
The highlight prop is used here to show the focus state. It's used internally when a validation error occurs.

Size

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

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

Disabled

Use the disabled prop to disable the PinInput.

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

No border

Use the noBorder prop to removes all borders (rings) from the InputTags.

<template>
  <B24PinInput no-border highlight size="xl" placeholder="○" />
</template>
The highlight prop is used here to indicate that there is no focus state.

Underline

Use the underline prop to removes all borders (rings) except the bottom one from the InputTags.

<template>
  <B24PinInput underline highlight size="xl" placeholder="○" />
</template>
The highlight prop is used here to show the focus state.

Rounded

Use the rounded prop to round the InputTags.

<template>
  <B24PinInput rounded highlight size="xl" placeholder="○" />
</template>
The highlight prop is used here to show the focus state.

Examples

With separator slot

Use the separator slot to customize the separator appearance.

<script setup lang="ts">
import Minus40Icon from '@bitrix24/b24icons-vue/actions/Minus40Icon'
</script>

<template>
  <B24PinInput :length="6" :separator="3" placeholder="○">
    <template #separator>
      <Minus40Icon class="size-4" />
    </template>
  </B24PinInput>
</template>

API

Props

Prop Default Type
as'div'any

The element or component this component should render as.

color'air-primary'"air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-warning" | "air-primary-copilot"
size'md' "xss" | "xs" | "sm" | "md" | "lg" | "xl"
underlinefalseboolean

Removes all borders (rings) except the bottom one

roundedfalseboolean

Rounds the corners of the input

noBorderfalseboolean

Removes all borders (rings)

length5 string | number

The number of input fields.

autofocusboolean
autofocusDelay0 number
highlightboolean
fixedboolean

Keep the mobile text size on all breakpoints. (Left for backward compatibility.)

separator number | number[]

Group inputs by inserting a separator between them. Pass a number to insert one after every Nth input, or an array of positions to insert after specific inputs.

defaultValue PinInputValue<T>

The default value of the pin inputs when it is initially rendered. Use when you do not need to control its checked state.

disabledboolean

When true, prevents the user from interacting with the pin input

id string

Id of the element

maskboolean

When true, pin inputs will be treated as password.

modelValue null | PinInputValue<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.

otpboolean

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.

requiredboolean

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.

b24ui { root?: SlotClass; base?: SlotClass; separator?: SlotClass; }

Slots

Slot Type
separator{ index: number; }

Emits

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

Expose

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

NameType
inputsRefRef<ComponentPublicInstance[]>

Theme

https://github.com/bitrix24/b24ui/tree/main/src/theme/pin-input.ts
export default {
  slots: {
    root: 'relative inline-flex items-center gap-1.5',
    base: 'px-0 py-0 border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-auto disabled:select-none disabled:opacity-30 disabled:resize-none text-center appearance-none transition-colors duration-300 ease-linear text-(--ui-color-base-1) style-blurred-bg-input placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color)',
    separator: 'text-dimmed flex items-center justify-center'
  },
  variants: {
    size: {
      xss: {
        base: 'size-[20px] text-(length:--ui-font-size-4xs)/[normal]'
      },
      xs: {
        base: 'size-[24px] text-(length:--ui-font-size-xs)/[normal]'
      },
      sm: {
        base: 'size-[28px] text-(length:--ui-font-size-sm)/[normal]'
      },
      md: {
        base: 'size-[34px] text-(length:--ui-font-size-lg)/[normal]'
      },
      lg: {
        base: 'size-[38px] text-(length:--ui-font-size-lg)/[normal]'
      },
      xl: {
        base: 'size-[46px] text-(length:--ui-font-size-2xl)/[normal]'
      }
    },
    color: {
      'air-primary': {
        base: 'style-filled'
      },
      'air-primary-success': {
        base: 'style-filled-success'
      },
      'air-primary-alert': {
        base: 'style-filled-alert'
      },
      'air-primary-copilot': {
        base: 'style-filled-copilot'
      },
      'air-primary-warning': {
        base: 'style-filled-warning'
      },
      default: {
        base: 'style-old-default'
      },
      danger: {
        base: 'style-old-danger'
      },
      success: {
        base: 'style-old-success'
      },
      warning: {
        base: 'style-old-warning'
      },
      primary: {
        base: 'style-old-primary'
      },
      secondary: {
        base: 'style-old-secondary'
      },
      collab: {
        base: 'style-old-collab'
      },
      ai: {
        base: 'style-old-ai'
      }
    },
    rounded: {
      true: 'rounded-(--ui-border-radius-3xl)',
      false: 'rounded-(--ui-border-radius-sm)'
    },
    noBorder: {
      true: 'ring-0 focus-visible:ring-0 style-transparent-bg'
    },
    underline: {
      true: 'rounded-none ring-0 focus-visible:ring-0 style-transparent-bg border-b-1 border-b-(--ui-color-design-outline-stroke)'
    },
    highlight: {
      true: 'ring ring-inset ring-(--b24ui-border-color)'
    },
    fixed: {
      false: ''
    }
  },
  compoundVariants: [
    {
      highlight: false,
      noBorder: false,
      underline: false,
      class: {
        base: 'ring ring-inset ring-(--ui-color-design-outline-stroke) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:not-disabled:not-data-disabled:ring-1 hover:not-disabled:not-data-disabled:ring-inset hover:not-disabled:not-data-disabled:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color)'
      }
    },
    {
      highlight: true,
      noBorder: false,
      underline: false,
      class: {
        base: 'ring ring-inset ring-(--b24ui-border-color) focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color) hover:ring-1 hover:ring-inset hover:ring-(--b24ui-border-color) data-[state=open]:ring-1 data-[state=open]:ring-inset data-[state=open]:ring-(--b24ui-border-color)'
      }
    },
    {
      noBorder: false,
      underline: true,
      class: {
        base: 'focus-visible:border-(--b24ui-border-color)'
      }
    },
    {
      highlight: true,
      noBorder: false,
      underline: true,
      class: {
        base: 'ring-0 border-b-(--b24ui-border-color)'
      }
    },
    {
      highlight: true,
      noBorder: true,
      underline: false,
      class: {
        base: 'ring-0'
      }
    },
    {
      fixed: false,
      size: 'xss',
      class: 'md:text-(length:--ui-font-size-4xs)/[normal]'
    },
    {
      fixed: false,
      size: 'xs',
      class: 'md:text-(length:--ui-font-size-xs)/[normal]'
    },
    {
      fixed: false,
      size: 'sm',
      class: 'md:text-(length:--ui-font-size-sm)/[normal]'
    },
    {
      fixed: false,
      size: 'md',
      class: 'md:text-(length:--ui-font-size-lg)/[normal]'
    },
    {
      fixed: false,
      size: 'lg',
      class: 'md:text-(length:--ui-font-size-lg)/[normal]'
    }
  ],
  defaultVariants: {
    size: 'md',
    color: 'air-primary'
  }
}

InputTime

A time selection input field.

RadioGroup

A collection of radio buttons to pick a single choice from several options.