X-UI LogoX-UI

Select

A dropdown control for selecting from a list of options with search, multi-select, and tagging support.

tsx
import { Select } from '@xdev-asia/x-ui-react';

Basic

Searchable

Enable search/filter with searchable prop.

tsx
<Select
  options={frameworks}
  searchable
  searchPlaceholder="Type to search..."
  clearable
/>

Multi-Select

Allow selecting multiple options with multiple prop.

tsx
<Select
  options={frameworks}
  multiple
  searchable
  values={values}
  onValuesChange={setValues}
  clearable
/>

Props

  • options - Array of options
  • placeholder - Placeholder text
  • value / onChange - Controlled value (single)
  • values / onValuesChange - Controlled values (multiple)
  • searchable - Enable search/filter
  • searchPlaceholder - Search input placeholder
  • multiple - Enable multi-select
  • clearable - Show clear button
  • tagging - Allow creating new options
  • variant - "outline" | "filled" | "glass"
  • size - "sm" | "md" | "lg"