CustomSelect

Fully custom-styled select with optional search, icons, descriptions and keyboard support.

A fully custom-styled dropdown select with optional in-dropdown search, per-option icons and descriptions, and complete keyboard support (arrows, Home/End, Enter, Escape). It's controlled: pass value and onChange, plus an options array. For free-text entry or creatable values see Combobox; for the Radix-based composed parts see Select.

Import

import { CustomSelect } from "@yuhuanowo/yunui";

Usage

CustomSelect is controlled — wire value and onChange to state:

const [value, setValue] = useState("medium");

<CustomSelect
  value={value}
  onChange={setValue}
  searchable
  placeholder="Select a model size"
  options={[
    { value: "small", label: "Small", description: "Fast, lower cost" },
    { value: "medium", label: "Medium", description: "Balanced" },
    { value: "large", label: "Large", description: "Highest quality" },
    { value: "xl", label: "Extra Large", description: "Maximum capacity" },
  ]}
/>

Example

Set searchable to add a filter box inside the dropdown. Each option can carry an icon and a secondary description line.

Searchable select with descriptions

Props

Prop	Type	Default	Description
className	string	—
disabled	boolean	false	Disable interaction and dim the control.
onChange*	(value: string) => void	—	Called with the chosen option's value.
options*	SelectOption[]	—	The selectable options.
placeholder	string	—	Placeholder shown when nothing is selected (falls back to i18n default).
searchable	boolean	false	Show an in-dropdown search box that filters options by label/value.
value*	string	—	Currently selected value (controlled).

Import

Usage

Example

Props

On this page