Skip to content
neoncite
All components
form

Input OTP

Segmented one-time-password input with accessible caret behavior.

Canonical source

Preview

This newly registered component is fully installable and documented. Its dedicated interactive showcase is generated in the extended preview pass; use the canonical source and API contract below in the meantime.

Installation

$bash
npx neoncite@latest add input-otp

Dependencies

input-otplucide-react

API Reference

PropTypeDefaultDescription
classNamestring—Extends the Neoncite classes without replacing semantic behavior.
…native / primitive propsvaries—Forwards the underlying React/HTML props where exposed by the component type.

States

  • • default
  • • hover
  • • focus-visible
  • • disabled
  • • selected/checked/open where applicable
  • • invalid when composed with validation

Accessibility

  • • Uses native HTML semantics where practical; provide an accessible name for icon-only or content-dependent controls.
  • • Neoncite focus-visible treatment must remain visible against OLED surfaces.
  • • Decorative glow, scan, pulse, and transition effects must not be the only indication of state.
  • • All non-essential animation must respect prefers-reduced-motion.

Keyboard interactions

Tab / Shift+TabMoves focus through interactive controls in document order.
Enter / SpaceActivates the focused control when supported by its native or primitive semantics.

Composition

  • • Install with `npx neoncite add input-otp`; registry dependencies are resolved recursively.
  • • Can be composed with other Neoncite primitives without a private styling runtime.

Token contract

--surface-0…3--hairline--foreground--muted-foreground--primary / --ringsemantic neon/glow tokens where used

SSR / hydration

No special SSR requirement beyond the underlying React/Radix dependency. Interactive client components are marked where required.

RTL

Layout uses logical flow where practical; verify icon direction for directional controls in RTL products.