Input OTP
Enter a one-time code in individual character slots.
Preview
Import
import { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator } from "@sigil-ui/components";Usage
<div className="grid gap-[var(--s-space-12)]">
<label htmlFor="verification-code">Verification code</label>
<InputOTP id="verification-code" length={6}>
<InputOTPGroup>{Array.from({ length: 6 }, (_, i) => <InputOTPSlot key={i} aria-label={i === 0 ? undefined : `Digit ${i + 1}`} />)}</InputOTPGroup>
</InputOTP>
</div>Sub-components
This component includes the following parts:
<InputOTPGroup><InputOTPSlot><InputOTPSeparator>
Token integration
| CSS Variable | Purpose |
|---|---|
--s-border | Border |
--s-text | Text |
--s-duration-fast | Duration fast |
--s-radius-md | Radius md |
--s-ring | Ring |
--s-primary | Primary |
--s-text-muted | Text muted |