PinField

PinField is a compound component for fixed-length codes such as OTPs and PINs.

Overview

PinField styling is divided between the slot grid, the visible slots, and the optional separator. PinFieldInput is visually hidden and does not define the surface contract.

Public CSS Variables

Variable	Value	Affects
slot size baselineslot		No visible change in this state
slot radius ratioslot		No visible change in this state
default slot surfaceslot		No visible change in this state
hover slot surfaceslot		No visible change in this state
active outlineslot active		No visible change in this state
error outlineslot error		No visible change in this state
group divider colorseparator		No visible change in this state
Height of the caret in the active slot.`PinFieldSlot`		No visible change in this state

Edit a value to try it in the demo. Hover a variable to outline what it changes; switch the preview state to see hover, pressed, focus, disabled and invalid variables. Click a name to copy it.

Part-Level Variables

Root

The root is a flex row that spaces slots with gap: var(--spacing-3).

Slot

Slots map size to both square dimensions and type scale, and render a blinking caret for active placeholder state.

Separator

The separator uses size-specific width tokens and a 1px line.

State And Variant Interaction

size changes slot dimensions and type scale
active state changes outline color
placeholder state changes slot text color
disabled and error states remap slot colors without changing layout

Examples

Grouped OTP slots

Each slot defines its own --input-br-ratio, so the override goes on the slots, while the gap is plain CSS on the root.

LTRRTL

grouped-otp-slots.tsx · 19 lines

import type { CSSProperties } from 'react';
import { PinField, PinFieldInput, PinFieldSeparator, PinFieldSlot } from '@vega-ui/react';

const roundSlot = { '--input-br-ratio': 0.5 } as CSSProperties;

export default function GroupedOtpSlots() {
  return (
    <PinField size='lg' maxLength={6} style={{ gap: 'var(--spacing-6)' }}>
      <PinFieldInput aria-label='Sign-in code' autoComplete='one-time-code' />
      <PinFieldSlot index={0} style={roundSlot} />
      <PinFieldSlot index={1} style={roundSlot} />
      <PinFieldSlot index={2} style={roundSlot} />

Do Not Override

breaking the square relationship between slot width and height
styling separators as if they were editable slots
hiding active focus/outline states