Select

Listbox with optional search, grouping and multi-select, positioned to stay on screen.

Source: 2 files
Dependencies: none
Playground: no

Examples

Every variant of the shipped component, live. Switch the layout to read them as a table or one at a time, and open Code for the file behind them.

Default

<SelectItem value="..." />

Installation

One package for the whole library — run this once and every component on this site is importable. Adding the tokens to your stylesheet is the other half; the installation guide covers it.

npm install kipui

import { Select, SelectTrigger, SelectContent, SelectItem } from "kipui";

Peer dependencies

react 19

react-dom 19

tailwindcss 4

Bundled dependencies

None beyond the peers above.

Usage

select-example.tsx

import { Select, SelectTrigger, SelectContent, SelectItem } from "kipui";

<Select defaultValue="asia" onValueChange={setRegion}>
  <SelectTrigger placeholder="Pick a region" />
  <SelectContent>
    <SelectItem value="asia">Asia</SelectItem>
    <SelectItem value="emea">EMEA</SelectItem>
  </SelectContent>
</Select>

For a plain list with no grouping or search, `SimpleSelect` takes an options array and skips the composition.
The listbox flips above the trigger when there isn't room below — do not hard-code a direction.

API reference

Transcribed from the component's own types. Props with no default are required.

Select

Prop	Default	Description
valuestring	required	Controlled selection.
defaultValuestring	required	Uncontrolled seed.
onValueChange(value: string) => void	required	Fires with the selected value.
disabledboolean	false	Blocks opening the listbox.
idstring	required	Id on the trigger, for an external label.
onChange(event: { target: { value: string } }) => void	required	Event-shaped alternative to `onValueChange`, for form libraries that expect one.
portalTargetHTMLElement \| null	required	Where the listbox is portalled. Defaults to the body.

SelectItem

Prop	Default	Description
valuestring	required	Required. Value reported on selection.
disabledboolean	false	Skipped by keyboard navigation.
descriptionstring	required	Second line under the option label.