Skip to content
ThorbisInterface Guidelines (opens in a new tab)
All components

Input OTP

A segmented one-time-code field with one accessible value and paste support.

Adopted
Family
Field
Available import
@/components/ui/input-otp
Status
Thorbis wrapper and live specimen ship here.
Live Thorbis specimeninput-otp
1
8
4
2
Use
Use for short verification codes when automatic fill and full-code paste are preserved.
Avoid
Do not create separate tab stops, block paste, or use it for passwords.

Use this component

GitHub source links require access to the private Thorbis design repository.

Wrapper sourceRepository and dependencies

Value exports
  • InputOTP
  • InputOTPGroup
  • InputOTPSeparator
  • InputOTPSlot
Type exports
None.
Setup, styles, and dependencies

These are React wrappers in the Thorbis design repository, not an installable npm UI package. In this repository, @/ resolves to src/ through tsconfig.json.

Use the repository's package.json and package-lock.json for dependencies. Load src/styles.css once at the application root for global tokens, typography, and themes. The wrappers compose colocated StyleX owners; include the generated token CSS and extracted StyleX output.

For another project, bring the wrapper and its transitive local imports, configure the alias, install the dependencies those files use, and provide the same token and style setup. Review the source before copying; the direct imports below are not a complete dependency closure.

Interactive examples require client-side React. This TanStack Start site server-renders and hydrates React; another host must hydrate or render the component on the client. Example code is the same TypeScript source used by its live preview.

Direct imports in this wrapper:

  • ./input-otp.stylex
  • @stylexjs/stylex
  • input-otp
  • react

A standalone usage example has not been published for this component yet. Inspect the wrapper source and existing live specimen; do not infer a different API from the upstream component name.

Adoption contract

  1. Start from the ShadCN accessible source primitive; keep upstream keyboard and focus behavior.
  2. Use Thorbis color, type, space, radius, shadow, and motion tokens only.
  3. Design hover, focus, selected, disabled, loading, empty, error, offline, and reduced-motion states where they apply.
  4. Verify desktop and 390px mobile, keyboard order, accessible names, and stable async geometry.
Official ShadCN component directory

Applied bookmark research

Reviewed 2026-09-06. These examples reinforce the existing owners; they do not introduce another visual style or claim the product behavior is implemented. Read the 26-source review and access limits.

A control keeps its meaning through every state

A button that changes width, a field that loses input, or a dialog that loses focus breaks the task even when the resting design looks precise.

Review the approved primitive as a sequence: resting, focused, activated, pending, resolved, and recovered. Keep the action label and footprint stable, associate errors with their fields, and preserve a visible keyboard path.

Thorbis example. Save estimate remains Save estimate while its state mark changes. A validation error keeps the entered values, explains the repair beside the field, and moves focus only when the interaction calls for it.

Verify. Test Tab, Shift-Tab, Enter, Escape where applicable, paste, invalid input, rapid activation, and a slow response. Repeat at 390px, in both themes, with zoom and reduced motion.

Do not import. No hand-built duplicate primitive, hidden label, disabled browser zoom, or borrowed shadow-only outer edge that violates D-017.

Open the ui skill · Evidence: Web Interface Guidelines; Invisible Details; components.build; Details that make interfaces feel better

Transfer the intent, not the desktop gesture

An interaction that works with a precise pointer or modifier key may be unusable for a tech holding a phone.

Preserve the record and task while adapting the visible action path to the device. Use the existing native owner for target sizing, safe areas, focus, and host behavior; no critical action relies only on hover or a hidden gesture.

Thorbis example. A field photo remains attached to the same job when the tech changes orientation or returns from another app. The visible capture action and retry path remain available without discovering a desktop shortcut.

Verify. Check one-handed use, software keyboard opening, text enlargement, orientation, focus visibility, and reduced motion on the relevant device. Keep permission refusal and return-from-interruption states in the review.

Do not import. No desktop hover contract on a phone, blocked zoom, silent clipboard access, or unverified claim that a web imitation is native behavior.

Open the native skill · Evidence: Web Interface Guidelines; Design Engineer Principles; Devouring Details

Loading search…

Loading search. You can close this message and keep reading.