Docs

Atoms

Input

Text entry field supporting states, icons, and validation.

6 examplesInteractive ComponentReact 19 & Next.js 16Tailwind CSS v4
Install
pnpm add @quinkit/ui
Import
import { Input } from "@quinkit/ui";

Interactive Examples

Live previews · code · themes · viewport · dark mode

Default

A basic text input.

Default rendered preview

Label & helper text

Associate a label and supporting text.

Label & helper text rendered preview

We'll never share your email.

Error state

Invalid styling with an error message.

Error state rendered preview

Enter a valid email address.

Disabled

A non-editable input.

Disabled rendered preview

Leading / trailing icon

Add affixes for context.

Leading / trailing icon rendered preview

Overview

Input is a Week 3 atom in @quinkit/ui. It is implemented with strict TypeScript, design-token classes, dark-mode compatible colors, Storybook coverage, and unit tests.

Accessibility Details

  • Use visible labels or aria-label for icon-only/unlabelled controls.
  • Keyboard behavior is verified in tests where the atom is interactive.
  • Focus styles use focus-visible and the shared ring token.

Dark mode and motion

The component uses semantic tokens such as bg-background, text-foreground, border-input, bg-primary, and text-primary-foreground, so it adapts to .dark and theme palettes. Motion-sensitive styling uses motion-reduce:* or avoids required animation.

Public API

Public props are documented with JSDoc in packages/ui/src/components/atoms/input/input.tsx.

Accessibility & Keyboard

Input adheres to WAI-ARIA design patterns for accessible web components.

Keyboard Navigation

  • Tab / Shift + Tab — Focuses control and moves between interactive elements.
  • Space / Enter — Triggers action or toggles selection.
  • Escape — Closes open popovers, overlays, or dropdown menus.

ARIA Standards

  • Built with semantic HTML tags and explicit aria-* attributes.
  • Uses high-contrast focus rings (ring-ring) visible in both light & dark mode.
  • Supports screen readers with non-visual label fallbacks.

Registry Install

Add a shadcn-compatible bridge file to your project that re-exports from @quinkit/ui.

Registry
npx shadcn@latest add https://quinkit-ui.vercel.app/r/input.json