Docs

Atoms

Select

Dropdown selection control with accessible keyboard support.

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

Interactive Examples

Live previews · code · themes · viewport · dark mode

Basic Select

Single-select dropdown with a placeholder.

Basic Select rendered preview

Grouped Options

Label groups of related options.

Grouped Options rendered preview

Disabled Option & Placeholder

Prevent selecting specific options.

Disabled Option & Placeholder rendered preview

Select Inside Form

Controlled select input within an access role form.

Select Inside Form rendered preview

Team Invitation

Select member role for access control.

Region & Country Selector

Select dropdown with long region descriptions.

Region & Country Selector rendered preview

Overview

Select 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/select/select.tsx.

Accessibility & Keyboard

Select 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/select.json