CleenUI · Forms · Select

Select

Dropdown selection with searchable filter, multi-select, custom rendering, and async option loading.

storybook.cleenui.com · forms-select--default
Open in new window

About Select

Select is the dropdown primitive. By default it renders a simple list of options, but it scales to handle hundreds of items with built-in search filtering, virtualized scrolling, and async loading from any API endpoint.

Multi-select mode lets users pick multiple values with a tag-chip preview in the trigger. Custom option rendering supports icons, descriptions, badges, and any JSX inside each item — useful for user pickers, status selectors, and category choosers.

When to use it

  • Single-value pickers like country or timezone.
  • Multi-select category or tag assignment.
  • Async-loaded options from a paginated API.
  • Custom-rendered items with icons and descriptions.

Common props

Prop
Type
Description
options
Option[]
Array of {value, label, icon, description}.
multi
boolean
Enable multi-select with chip preview.
searchable
boolean
Show a filter input inside the dropdown.
loadOptions
(query: string) => Promise<Option[]>
Async option loader.
renderOption
(option) => ReactNode
Custom per-option renderer.
⚡ Already in an AI editor?

Set up CleenUI in your tool.

Skip the manual import — ask your AI agent to build with this component. The Builder skill knows its props, variants, and idioms.

Live demo

See CleenUI running before you talk to us.

Configure a demo environment in about twenty seconds — theme, spacing, the modules you care about, sample data for your industry — then launch the full dashboard in your browser. Nothing to install, no signup.

  • 20 sec setup
  • 15 themes
  • 20 modules
  • 80 industries
Pick a theme to start with