Pin Input

Segmented inputs for OTPs and verification codes with a hidden input for forms

A PIN / OTP input built on Ark UI Pin Input. The convenience component renders length cells, a label, and PinInputHiddenInput for native form submission. Use the compound parts to customize each segment.

Verification code

import { PinInput } from "@/components/ui/pin-input";

export default function Example() {
  return <PinInput label="Verification code" length={6} />;
}

View Code

Installation

bash

liminal add pin-input

Usage

length sets how many segments are rendered (default 4). Additional props are forwarded to PinInputRoot (for example otp, type, value, onValueChange).

Short code

import { PinInput } from "@/components/ui/pin-input";

export default function Example() {
  return <PinInput label="Short code" length={4} />;
}

View Code

Examples

Compound API

Exports: PinInputRoot, PinInputLabel, PinInputControl, PinInputField, PinInputHiddenInput. Render one PinInputField per index when composing manually.

tsx

import {
  PinInputRoot,
  PinInputLabel,
  PinInputControl,
  PinInputField,
  PinInputHiddenInput,
} from "@/components/ui/pin-input";

export default function Example() {
  return (
    <PinInputRoot count={4}>
      <PinInputLabel>Code</PinInputLabel>
      <PinInputControl>
        <PinInputField index={0} />
        <PinInputField index={1} />
        <PinInputField index={2} />
        <PinInputField index={3} />
      </PinInputControl>
      <PinInputHiddenInput />
    </PinInputRoot>
  );
}

API

Prop	Type	Default	Description
label	string	-	Optional label above the control.
length	number	4	Number of segments (maps to Ark `count` on the root).

Also accepts Ark PinInput.Root props. See Ark Pin Input.