Static UIStatic UI Docs
HomeComponentsBlocksTemplatesThemesShowcaseStorybookGitHub

Getting Started

  • Introduction
  • Installation
  • Theming
  • CLI

Components

AccordionAlertAlert DialogAspect RatioAvatarBadgeBreadcrumbButtonCalendarCardCarouselCheckboxCollapsibleContext MenuDialogDrawerDropdown MenuHover CardInputInput GroupInput OTPKbdLabelNumber FieldPaginationPopoverProgressRadio GroupScroll AreaSelectSeparatorSidebarSkeletonSliderSonnerSpinnerSwitchTableTabsTextareaToastToggleToggle GroupTooltipTypography

Blocks

  • Overview
  • Dashboard 01
  • Dashboard 02
  • Login 01
  • Login 02
  • Pricing 01
  • Pricing 02
  • Hero 01
  • Hero 02
  • Feature 01
  • Feature 02

Templates

  • Overview
  • Marketing
  • Dashboard
  • Auth

Themes

  • Overview
  • Green
  • Blue
  • Zinc
  • Slate
  • Gaming
  • Cyberpunk
  • Modern

Showcase

  • Showcase

Developers

  • Architecture
  • Monorepo Structure
  • Development Workflow
  • Contributing
  • Testing
  • Release Process
  • Commit Conventions
  • Versioning
  • CI/CD
  • Project Health

Getting Started

  • Introduction
  • Installation
  • Theming
  • CLI

Components

AccordionAlertAlert DialogAspect RatioAvatarBadgeBreadcrumbButtonCalendarCardCarouselCheckboxCollapsibleContext MenuDialogDrawerDropdown MenuHover CardInputInput GroupInput OTPKbdLabelNumber FieldPaginationPopoverProgressRadio GroupScroll AreaSelectSeparatorSidebarSkeletonSliderSonnerSpinnerSwitchTableTabsTextareaToastToggleToggle GroupTooltipTypography

Blocks

  • Overview
  • Dashboard 01
  • Dashboard 02
  • Login 01
  • Login 02
  • Pricing 01
  • Pricing 02
  • Hero 01
  • Hero 02
  • Feature 01
  • Feature 02

Templates

  • Overview
  • Marketing
  • Dashboard
  • Auth

Themes

  • Overview
  • Green
  • Blue
  • Zinc
  • Slate
  • Gaming
  • Cyberpunk
  • Modern

Showcase

  • Showcase

Developers

  • Architecture
  • Monorepo Structure
  • Development Workflow
  • Contributing
  • Testing
  • Release Process
  • Commit Conventions
  • Versioning
  • CI/CD
  • Project Health

Navigation

Input GroupKbd

Component Info

CategoryForms
StatusStable
FrameworkReact

Package

@static-ui/ui

Contribute

  • Report an issue
  • GitHubRequest a feature
  • Edit this page

Resources

  • Storybook
  • GitHub
  • Documentation
  1. Docs
  2. Components
  3. Input OTP

Input OTP

Forms

A one-time passcode input with separate slots for each character.

Loading component...

Installation

Run the following command to add this component to your project:

$pnpm dlx static-ui add input-otp

Import

Import the component directly from the package:

import { InputOTP } from "@static-ui/ui"

API Reference

Common props available for this component:

PropTypeDescription
maxLengthnumberMaximum number of OTP characters.
valuestringControlled value.
onChange(value: string) => voidCallback when value changes.
classNamestringAdditional CSS classes to apply.

Accessibility

Uses `<input>` elements with `aria-label` for each slot. Provides keyboard navigation between slots.

Related Components

CalendarDate selection month grid.
CheckboxBinary selection control.
InputText field for user entry.
Input GroupGrouped input with adornments.
LabelForm control label.
Number FieldNumeric input with steppers.
Radio GroupMutually exclusive options.
SelectDropdown value picker.
SliderDrag handle range input.
SwitchToggle on/off control.
TextareaMulti-line text input.