Inputs

PinInput

A multi-cell controlled code input with paste, OTP, and keyboard navigation support.

PinInputView source

Example

The preview is interactive. The code below it is the docs demo source; demo-only layout classes can be omitted in application code.

Verification code

Enter the six-digit code.

tsx

import { Cell } from "retend";

import { Field, PinInput } from "innate-ui";
import classes from "../docs.module.css";

export function PinInputDemo() {
  const code = Cell.source("");

  return (
    <Field id="pin-input-demo" class={[classes.selectExample, classes.pinInputDemo]}>
      <Field.Label>Verification code</Field.Label>
      <PinInput value={code} length={6} otp onChange={(value) => code.set(value)} />
      <Field.Description>Enter the six-digit code.</Field.Description>
    </Field>
  );
}

API reference

This table is generated from Innate UI's exported TypeScript declarations and JSDoc. Native element attributes inherited by a prop type are not repeated here.

PinInputProps

Prop	Type	Default
`value`required Current PIN/code as one contiguous string.	`JSX.ValueOrCell<string>`	`—`
`length` Number of input cells. This is structural and must be a positive integer.	`number`	`4`
`id` Stable control id when the component is not inside `Field`.	`string`	`—`
`type` Accepted character class.	`PinInputType`	`"numeric"`
`pattern` Additional regular expression applied to each entered character.	`string`	`—`
`placeholder` Placeholder shown in empty cells.	`JSX.ValueOrCell<string>`	`—`
`mask` Whether entered characters are visually masked.	`JSX.ValueOrCell<boolean>`	`false`
`otp` Enables one-time-code autofill semantics.	`JSX.ValueOrCell<boolean>`	`false`
`disabled` Whether all cells are disabled.	`JSX.ValueOrCell<boolean>`	`false`
`readOnly` Whether all cells are read-only.	`JSX.ValueOrCell<boolean>`	`false`
`required` Whether every cell is required for native form validation.	`JSX.ValueOrCell<boolean>`	`false`
`invalid` Whether the control is in an invalid state.	`JSX.ValueOrCell<boolean>`	`false`
`ariaDescribedBy` Ids of elements that describe the control.	`JSX.ValueOrCell<string \| undefined>`	`—`
`ariaLabelledBy` Ids of elements that label the grouped control.	`JSX.ValueOrCell<string \| undefined>`	`—`
`name` Name used for form submission of the complete code.	`string`	`—`
`form` Id of a form to associate with the cells and submitted value.	`string`	`—`
`autoFocus` Autofocuses the current insertion cell when mounted.	`boolean`	`false`
`blurOnComplete` Blurs the last focused cell when the code becomes complete.	`boolean`	`false`
`sanitizeValue` Optional paste/autofill sanitizer, e.g. removing spaces or dashes.	`(value: string) => string`	`—`
`onChange` Called with the next complete string whenever the user edits the code.	`(value: string) => void`	`—`
`onComplete` Called after a user edit produces a value with `length` characters.	`(value: string) => void`	`—`

Inspect the typed source →