Pin Input

A form component split into individual character blocks for entering authentication codes or pins.
For more information on this component configuration, visit Radix UI

Disabled

Use the disabled attr or the disabled class to disable an item component.

Masked

Use the type='password' prop to mask the component input.

Valid

Use the data-valid attr or the valid class to indicate an valid state.

Invalid

Use the data-invalid attr or the invalid class to indicate an invalid state.

Sizes

Use the pin-input-{size} class to control the component size.

Size values can include:smmdlg.

For more information on all available sizing utilities, visit Tailwind

Variants

Use the variant and palette classes to control the appereance of the component.

Variant values can include solidoutlinesurfacesubtleplain.
Color palettes can include primaryneutral. For extra palettes such as warning error and more, refer to the Colors section.

Customizing

globals.css


:root {
  --ex-pin-input-font-family: var(--font-sans);
  --ex-pin-input-font-weight: var(--font-weight-normal);
 
  --ex-pin-input-font-size-sm: var(--text-xs);
  --ex-pin-input-font-size-md: var(--text-sm);
  --ex-pin-input-font-size-lg: var(--text-base);
 
  --ex-pin-input-size-sm: calc(var(--spacing) * 9);
  --ex-pin-input-size-md: calc(var(--spacing) * 10);
  --ex-pin-input-size-lg: calc(var(--spacing) * 11);
 
  --ex-pin-input-gap-x-sm: calc(var(--spacing) * 1);
  --ex-pin-input-gap-x-md: calc(var(--spacing) * 1.25);
  --ex-pin-input-gap-x-lg: calc(var(--spacing) * 1.5);
 
  --ex-pin-input-radius-sm: var(--radius-sm);
  --ex-pin-input-radius-md: var(--radius-sm);
  --ex-pin-input-radius-lg: var(--radius-sm);
 
  --ex-pin-input-placeholder-font-size-sm: var(--text-2xs);
  --ex-pin-input-placeholder-font-size-md: var(--text-xs);
  --ex-pin-input-placeholder-font-size-lg: var(--text-sm);
}

API

For more information on this component configuration, visit Radix UI

Pin Input

Element	Selector
`PinInput`	`.ex-pin-input`

Prop	Type	Default
`as`	`ElementType`	`div`
`asChild`	`boolean`	`false`
`autoComplete`	`enum of ["off", "one-time-code"]`	`one-time-code`
`autoFocus`	`boolean`	`false`
`autoSubmit`	`boolean`	`false`
`defaultValue`	`string`
`disabled`	`boolean`	`false`
`form`	`string`
`name`	`string`
`orientation`	`enum of ["horizontal", "vertical"]`	`vertical`
`placeholder`	`string`
`readOnly`	`boolean`	`false`
`sanitizeValue`	`function`
`type`	`enum of ["text", "password"]`	`text`
`validationType`	`enum of ["none" \| "numeric" \| "alpha" \| "alphanumeric"]`	`numeric`
`onAutoSubmit`	`function`
`onValueChange`	`function`

Pin Input Field

Element	Selector
`PinInput.Field`	`.ex-pin-input-field`

Prop	Type	Default
`as`	`ElementType`	`input`
`asChild`	`boolean`	`false`

Pin Input Hidden

Element	Selector
`PinInput.Hidden`	`.ex-pin-input-hidden`

Prop	Type	Default
`as`	`ElementType`	`input`
`asChild`	`boolean`	`false`