PinInput

Set length and type. The machine manages focus, paste, completion, and form behavior.

import { PinInput } from '@manti-ui/react';

export default function PinInputBasic() {
  return (
    <PinInput
      label="One-time code"
      length={4}
      type="numeric"
      otp
      variant="primary"
    />
  );
}

Masking

Set mask for secret values.

Sizes

Small

Medium

Large

API

Prop	Type	Default	Description
`length`	`number`	`4`	Number of input cells.
`label`	`ReactNode`	—	Optional field label.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Cell size.
`variant`	`MantiVariant`	`'primary'`	Focus-ring variant.
`type`	`'alphanumeric' \| 'numeric' \| 'alphabetic'`	—	Allowed character type.
`mask`	`boolean`	—	Mask entered characters like a password field.
`otp`	`boolean`	—	Hint the field is a one-time code (sets autocomplete).
`value`	`string[]`	—	Controlled value.
`defaultValue`	`string[]`	—	Initial value for uncontrolled usage.
`onValueChange`	`(value: string[]) => void`	—	Called on every change.
`onValueComplete`	`(value: string[], valueAsString: string) => void`	—	Called once every cell is filled.
`placeholder`	`string`	—	Placeholder shown in empty cells.
`disabled`	`boolean`	—	Disable the field.
`readOnly`	`boolean`	—	Make the field read-only.
`invalid`	`boolean`	—	Mark the field as invalid.
`required`	`boolean`	—	Mark the field as required.
`name`	`string`	—	Form field name.

Styling

Anatomy

Part	Selector	Description
`root`	`[data-scope="pin-input"][data-part="root"]`	The field wrapper.
`label`	`[data-scope="pin-input"][data-part="label"]`	The optional field label.
`control`	`[data-scope="pin-input"][data-part="control"]`	The row that lays out the input cells.
`input`	`[data-scope="pin-input"][data-part="input"]`	Each individual code-entry cell.

Tokens

Token	Controls
`--manti-pin-input-size`	size

Last updated 13 September 2026