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.