Select

A dropdown select built on Radix Select — a composed family of parts that renders a portalled, animated, keyboard-accessible listbox. For a flat, options-array API (with search) see Combobox; for a fully custom-styled variant see CustomSelect.

Import

tsx

1import {
2  Select,
3  SelectTrigger,
4  SelectValue,
5  SelectContent,
6  SelectItem,
7} from "@yuhuanowo/yunui";

Basic

Select

Parts

Part	Role
`Select`	Root; holds `value`/`onValueChange` or `defaultValue`.
`SelectTrigger`	The button that opens the listbox.
`SelectValue`	Renders the selected label (or `placeholder`).
`SelectContent`	Portalled, animated dropdown panel.
`SelectItem`	A single option (`value` required).
`SelectLabel`	Non-interactive heading for a group of options.
`SelectSeparator`	Thin divider between option groups.
`SelectScrollUpButton` / `SelectScrollDownButton`	The chevrons that appear at the panel's edges when the list is taller than the panel. `SelectContent` renders both for you — export them only if you compose the panel yourself.

Select re-exports Radix Select parts with design-system styling. See the Radix Select docs for the complete prop reference, including SelectGroup.

Import

Basic

Parts

On this page