Pin Input

Usage

import {
  PinInput,
  PinInputControl,
  PinInputInput,
  PinInputLabel,
} from "@kanzo-tech/ui";

<PinInput otp>
  <PinInputLabel>Countersign</PinInputLabel>
  <PinInputControl>
    {Array.from({ length: 6 }, (_, index) => (
      <PinInputInput key={index} index={index} />
    ))}
  </PinInputControl>
</PinInput>

Each cell is one PinInputInput, wired to the machine by its index. Render as many as the code is long. otp sets the inputs' autocomplete so the browser and OS offer the incoming code.

Anatomy

PinInput
├── PinInputLabel
└── PinInputControl
    └── PinInputInput   (one per index)

API Reference

No props beyond Ark's, plus a size (sm · md · lg) on PinInputInput matching Input. PinInput extends PinInput.Root (value, defaultValue, onValueChange, otp, mask, type — numeric · alphanumeric · alphabetic, placeholder, disabled, invalid, readOnly, required, blurOnComplete, name, form), and each PinInputInput takes the index of the cell it renders. For controlled state from inside the tree, import usePinInputContext from @ark-ui/react.

PinInputInputProps is exported, so a wrapper can take the same props without restating them.