InputOtp

One-time code entry with grouped slots, paste support and completion feedback.

CoreAdvanced Inputs@gaudi/design-system/core/InputOtpView in Storybook Source

Installation

pnpm add github:ahmadassaf/design-system

Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.

import { InputOTP } from '@gaudi/design-system/core/InputOtp';

Copy an example into your project with the shadcn CLI: npx shadcn@latest add https://design.gaudi.site/r/input-otp-code-formats.json.

Usage

import { InputOTP, InputOTPGroup, InputOTPSlot } from '@gaudi/design-system/core/InputOtp';
<InputOTP maxLength={6} aria-label='Verification code' value={code} onChange={setCode}>  <InputOTPGroup>{Array.from({ length: 6 }, (_, index) => <InputOTPSlot key={index} index={index} />)}</InputOTPGroup></InputOTP>

Examples

Code formats

Storybook

API

10 props

Accessibility

The underlying input supports keyboard entry and paste. Label the complete code field and announce validation beside it.

FieldField composes form label, description, error, and input building blocks.7 examples CalendarDate selection for single dates, ranges, bookings and localized calendars.11 examples CascaderSelect items from hierarchical data using drill-down, columns, search and multiple selection.12 examples ColorPickerAn inline color canvas with hue, opacity, an eyedropper, and HEX/RGB/HSL/CSS editors.FileUploadChoose or drop attachments with validation, upload progress and recovery actions.5 examples NumberFieldNumeric entry with increment buttons, bounds, locale formatting and scrubbing.2 examples