Select

Updated October 5, 2026

Select is a select-only combobox: its listbox opens in a dithered ink frame, the active option inverts, and arrows, Home and End, or typing a letter move through the options. Like the charts, it takes your theme's ink and paper, light or dark, and needs no Tailwind.

Example

Chart

Style

Locked

import "@/components/dithercharts/controls.css"
import { Select } from "@/components/dithercharts/select"

<Select
  label="Chart"
  defaultValue="bar"
  // Keeps the popup clear of a 64px sticky header.
  collisionPadding={{ top: 72 }}
  options={[
    { value: "area", label: "Area" },
    { value: "bar", label: "Bar" },
    { value: "line", label: "Line" },
    { value: "pie", label: "Pie" },
  ]}
/>
<Select
  label="Style"
  options={[
    { value: "bayer", label: "Bayer" },
    { value: "woodcut", label: "Woodcut", disabled: true },
  ]}
/>

Install

Controls install with DitherCharts Pro. See Installation to log in, then import controls.css once, e.g. in your root layout.

npx dithercharts add select

Props

It renders a native element, so every other attribute that element takes passes through.

Select props
Prop	Type	Default	Description
labelrequired	Type ReactNode	Default –	The caption above the field, and its accessible name.
optionsrequired	Type readonly SelectOption[]	Default –
value	Type string	Default –	The chosen option's value, for a controlled select; pair it with `onValueChange`.
defaultValue	Type string	Default –	The option chosen at first, for an uncontrolled select.
onValueChange	Type (value: string) => void	Default –
placeholder	Type string	Default `"Select…"`	Shown while nothing is chosen.
name	Type string	Default –	The form field name; a hidden input carries the value.
disabled	Type boolean	Default `false`
collisionPadding	Type { top?: number; bottom?: number }	Default 8 each	Space in px the popup keeps clear at the window's top and bottom, e.g. a sticky header's height. It opens on the side with more room and shrinks to fit.
className	Type string	Default –
hint	Type ReactNode	Default –	Help text under the field, read after its label.
error	Type ReactNode	Default –	An error under the field; it also marks the field invalid.