React Principles logo

react-principles

GitHub

Select

Styled native select input for predictable keyboard interaction, forms, and simple option lists that benefit from platform behavior.

AccessibleDark Mode3 SizesKeyboard Nav

Install

$npx react-principles add select
01

Theme Preview

Light
expand_more
expand_more
expand_more
Dark
expand_more
expand_more
expand_more
02

Live Demo

Open in Storybookopen_in_new
Size
expand_more
03

Code Snippet

src/ui/Select.tsx
import { Select } from "@/ui/Select";

<Select
  label="Framework"
  options={[
    { label: "Next.js", value: "next" },
    { label: "Vite", value: "vite" },
    { label: "Remix", value: "remix" },
  ]}
  size="md"
/>
04

Copy-Paste (Single File)

Select.tsx
import { forwardRef, type SelectHTMLAttributes } from "react";
import { cn } from "@/lib/utils";

export type SelectSize = "sm" | "md" | "lg";

export interface SelectOption {
  label: string;
  value: string;
  disabled?: boolean;
}

export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, "size"> {
  label?: string;
  description?: string;
  error?: string;
  size?: SelectSize;
  options?: SelectOption[];
  placeholder?: string;
}
05

Props

PropTypeDefaultDescription
labelstring—Field label rendered above the select input.
descriptionstring—Helper text shown below the select when no error is present.
errorstring—Error text that replaces the description and applies error styles.
size"sm" | "md" | "lg""md"Changes the select height, padding, and text size.
optionsSelectOption[]—Convenience array for rendering option elements.
placeholderstring—Placeholder option label rendered with an empty value.
classNamestring—Additional classes merged into the root wrapper.
react-principles

Getting Started

Components