input-otp-pill-demo

1"use client"
2 
3import {
4  InputOTP,
5  InputOTPGroup,
6  InputOTPSlot,
7} from "@/components/ui/input-otp"
8import { Label } from "@/components/ui/label"
9 
10export default function InputOTPPill() {
11  return (
12    <div className="space-y-2">
13      <Label htmlFor="input-otp-pill">One-Time Password</Label>
14      <InputOTP id="input-otp-pill" maxLength={6}>
15        <InputOTPGroup>
16          <InputOTPSlot index={0} variant="pill" />
17          <InputOTPSlot index={1} variant="pill" />
18          <InputOTPSlot index={2} variant="pill" />
19          <InputOTPSlot index={3} variant="pill" />
20          <InputOTPSlot index={4} variant="pill" />
21          <InputOTPSlot index={5} variant="pill" />
22        </InputOTPGroup>
23      </InputOTP>
24    </div>
25  )
26}