Components

Input OTP

Accessible one-time password component with copy-paste functionality.

[data-input-otp] { --nojs-bg: white !important; --nojs-fg: black !important; background-color: var(--nojs-bg) !important; color: var(--nojs-fg) !important; caret-color: var(--nojs-fg) !important; letter-spacing: .25em !important; text-align: center !important; border: 1px solid var(--nojs-fg) !important; border-radius: 4px !important; width: 100% !important; } @media (prefers-color-scheme: dark) { [data-input-otp] { --nojs-bg: black !important; --nojs-fg: white !important; } }

Installation

import { ... } from 'nooxit-design-system/components/input-otp';

Notes

40px slots joined into groups with a 6px radius on the outer corners, values in text-sm/leading-6 medium, and a small dot separator (a 6px circle).

Source — src/components/input-otp.tsx
Figma — Input OTP in the Nooxit UI kit

Input Group

Groups an input with addons, buttons and text.

Item

A flexible row for lists, menus and cards.

Input OTP

InstallationCopy Anchor Link

NotesCopy Anchor Link

On this page

Installation

Notes