Skip to main content

Pin Field

Pin Field is a form control that lets people enter a code in separate cells, such as a verification code or access code.

Import

import { PinField } from '@vortexlabs/vortex';
import type { PinFieldProps } from '@vortexlabs/vortex';

Other links

PinField.Root

PinField.Root props
Prop	Type	Default	Attributes
`children`	`React.ReactNode`	No default value
`id`	`string`	No default value
`name`	`string`	No default value
`size`	`union`	`sm`
`variant`	`union`	`outline`
`error`	`boolean`	No default value
`disabled`	`boolean`	No default value
`required`	`boolean`	No default value
`gap`	`number`	`2`
`className`	`union`	No default value
`attributes`	`object`	No default value

PinField.Label

PinField.Label props
Prop	Type	Default	Attributes
`children`	`React.ReactNode`	No default value
`wrap`	`union`	No default value

PinField.Input

PinField.Input props
Prop	Type	Default	Attributes
`name`	`string`	No default value
`length`	`number`	`4`
`pattern`	`union`	`numeric`
`value`	`string`	No default value
`defaultValue`	`string`
`onChange`	`callback`	No default value
`onFocus`	`callback`	No default value
`onBlur`	`callback`	No default value
`className`	`union`	No default value
`attributes`	`object`	No default value
`ref`	`ref`	No default value

PinField.HelperText

PinField.HelperText props
Prop	Type	Default	Attributes
`children`	`React.ReactNode`	No default value

PinField.ErrorMessage

PinField.ErrorMessage props
Prop	Type	Default	Attributes
`children`	`React.ReactNode`	No default value