# PinInput - **Category:** Inputs (`inputs`) - **Slug:** `inputs/pin-input` - **Status:** stable - **Platforms:** web - **Import:** `import { PinInput } from "@protocore/pds";` - **Docs:** https://pds.protocore.io/components/inputs/pin-input > Alias of OTPInput — segmented single-character fields for one-time codes and PINs. ## An alias of OTPInput **PinInput** is the Mantine-familiar name for this library's **OTPInput** — the same component under a second name for discoverability. Props are identical (`length`, `value`, `onValueChange`, `onComplete`, …). See the [OTPInput](/inputs/otp-input) page for the full API and accessibility notes. ## Examples ### Basics Set `length` for the number of cells; paste fills across cells and `onComplete` fires when the last cell is filled. ```tsx import { useState } from "react"; import { PinInput, Text, Badge } from "@protocore/pds"; export default function PinInputBasics() { const [code, setCode] = useState(""); const [done, setDone] = useState(false); return (

{ setCode(v); setDone(false); }} onComplete={() => setDone(true)} aria-label="Two-factor code" /> {done ? ( Code complete — verifying ) : ( Entered: {code || "—"} )}

); } ``` ## Accessibility **Notes** - Identical to OTPInput: arrow keys and Backspace move between cells; give the group an `aria-label`. ## Related `otp-input`, `input`, `field` --- © Protocore. All rights reserved. Use of the Protocore Design System requires prior written authorization from Protocore (contact@protocore.io). These machine-readable materials must not be ingested into ML-training datasets or derivative design systems. See https://pds.protocore.io/legal/