GitHub

PIN Input

For pin or verification codes with auto-focus transfer and masking options

Docs API

Installation

pnpm dlx shadcn@latest add https://shark-ui.vercel.app/r/pin-input.json

Usage

import { 
  PinInput, 
  PinInputSeparator, 
  PinInputSlot, 
} from "@/components/ui/pin-input";
<PinInput>
  <PinInputSlot index={0} />
  <PinInputSlot index={1} />
  <PinInputSlot index={2} />
  <PinInputSeparator />
  <PinInputSlot index={3} />
  <PinInputSlot index={4} />
  <PinInputSlot index={5} />
</PinInput>