Component

Select

A dropdown select component for choosing from a list of options. Provides native browser behavior with consistent styling across light and dark modes.

Preview

Rendered from Storybook stories

Default

With Value

Disabled

Code

select.tsx

import * as React from "react";

type SelectProps = React.SelectHTMLAttributes<HTMLSelectElement>;

export function Select({ className = "", children, ...props }: SelectProps) {
  return (
    <select
      className={[
        "flex h-9 w-full rounded-md border px-3 py-1 text-sm shadow-sm transition-colors cursor-pointer",
        "bg-white text-zinc-900",
        "dark:bg-zinc-900 dark:text-zinc-100",
        "border-zinc-200 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-indigo-500",
        "dark:border-zinc-700 dark:focus-visible:ring-indigo-400",
        "disabled:cursor-not-allowed disabled:opacity-50",
        className,
      ]
        .filter(Boolean)
        .join(" ")}
      {...props}
    >
      {children}
    </select>
  );
}

Tests

select.test.tsxPassed

Ran at build time

  ✓ Select renders a select element 33ms
  ✓ Select displays all options 17ms
  ✓ Select changes value on selection 142ms
  ✓ Select can be disabled 3ms
  ✓ Select respects defaultValue prop 4ms
  ✓ Select dark mode applies dark mode styles 3ms
  ✓ Select dark mode applies dark mode focus styles 2ms
  ✓ Select dark mode applies dark mode disabled styles 2ms
  Tests  8 passed (8)