Select

A custom dropdown select component with single and multi-select modes, search functionality, and validation support. Features a dropdown menu that appears below the trigger, similar to Ant Design.

Basic Usage

import { Select } from 'uiplex';

<Select
  placeholder="Select an option"
  options={[
    { value: 'option1', label: 'Option 1' },
    { value: 'option2', label: 'Option 2' },
    { value: 'option3', label: 'Option 3' },
  ]}
  value={value}
  onChange={(value) => setValue(value)}
/>

Multi-Select

<Select
  mode="multiple"
  placeholder="Select multiple options"
  options={options}
  value={values}
  onChange={(values) => setValues(values)}
/>

<Select
  mode="multiple"
  placeholder="Select multiple countries"
  options={countries}
  allowClear
/>

Searchable

<Select
  searchable
  placeholder="Search and select..."
  options={countries}
/>

<Select
  mode="multiple"
  searchable
  placeholder="Search and select multiple..."
  options={countries}
/>

Sizes

<Select size="sm" placeholder="Small select" options={options} />
<Select size="md" placeholder="Medium select" options={options} />
<Select size="lg" placeholder="Large select" options={options} />

Variants

<Select variant="outline" placeholder="Outline" options={options} />
<Select variant="filled" placeholder="Filled" options={options} />
<Select variant="unstyled" placeholder="Unstyled" options={options} />

With FormControl

Country*

import { Select, FormControl, FormLabel, FormErrorMessage } from 'uiplex';

<FormControl isInvalid={hasError} isRequired id="country-field">
  <FormLabel>Country</FormLabel>
  <Select
    placeholder="Select a country"
    options={countries}
    value={country}
    onChange={(value) => setCountry(value)}
  />
  <FormErrorMessage>Country is required</FormErrorMessage>
</FormControl>

States

<Select placeholder="Normal select" options={options} />
<Select isDisabled placeholder="Disabled select" options={options} />
<Select isReadOnly placeholder="Read only" options={options} value="option1" />
<Select isInvalid placeholder="Invalid select" options={options} />

With Disabled Options

<Select
  placeholder="Select an option"
  options={[
    { value: 'option1', label: 'Available Option 1' },
    { value: 'option2', label: 'Available Option 2' },
    { value: 'option3', label: 'Disabled Option', disabled: true },
    { value: 'option4', label: 'Available Option 3' },
  ]}
/>

API Reference

Prop	Type	Default	Description
size	"sm" \| "md" \| "lg"	"md"	Size of the select
variant	"outline" \| "filled" \| "unstyled"	"outline"	Visual style variant
options	SelectOption[]	[]	Array of option objects
placeholder	string	"Select..."	Placeholder text shown when no option is selected
value	string \| number \| (string \| number)[]	-	Controlled value (single or array for multi-select)
defaultValue	string \| number \| (string \| number)[]	-	Default value (uncontrolled)
onChange	(value) => void	-	Callback when value changes
mode	"single" \| "multiple"	"single"	Single or multi-select mode
searchable	boolean	false	Enable search functionality
allowClear	boolean	false	Show clear button when value is selected
width	string \| number	-	Width of the select component (e.g., "300px", 300, "100%")
isInvalid	boolean	false	Whether the select is invalid
isDisabled	boolean	false	Whether the select is disabled
isReadOnly	boolean	false	Whether the select is read-only
className	string	""	Additional CSS classes
style	React.CSSProperties	-	Inline styles
...props	React.SelectHTMLAttributes	-	All standard HTML select attributes

SelectOption Type

Property	Type	Description
value	string \| number	Option value
label	string	Option display text
disabled	boolean	Whether the option is disabled