Select

A form select with a custom, themeable listbox - and a native escape hatch. It takes MenuItem children as its options, supports single and multiple selection, and integrates with Form / FormControl context exactly like NativeSelect and TextInput.

import { Select } from '@soroush.tech/design-system/Select'
import { MenuItem } from '@soroush.tech/design-system/MenuItem'

;<Select variant="outlined" placeholder="Pick a platform" onChange={(value) => console.log(value)}>
  <MenuItem value="web">Web</MenuItem>
  <MenuItem value="android">Android</MenuItem>
  <MenuItem value="ios">iOS</MenuItem>
</Select>

`native`

native={false} (default) - renders a role="combobox" trigger and a portaled role="listbox" popover, positioned under the trigger. Fully themeable option rows, supports multiple.
native={true} - delegates to NativeSelect (a real <select>), deriving its options from the MenuItem children's value + label. Single-select only; multiple is ignored on this path.

Examples

Default

<Select variant="outlined" placeholder="Pick a platform" />

Native

<Select native variant="outlined" placeholder="Pick a platform" />

Variants

<Flex flexDirection="column" gap={3}>
  {(['outlined', 'default', 'underline', 'text'] as const).map((variant) => (
    <Select key={variant} variant={variant} placeholder={variant}>
      {platformItems}
    </Select>
  ))}
</Flex>

Sizes

<Flex gap={3} alignItems="center">
  {(['sm', 'md', 'lg'] as const).map((size) => (
    <Select key={size} size={size} variant="outlined" placeholder={size}>
      {platformItems}
    </Select>
  ))}
</Flex>

Error State

<Select variant="outlined" error placeholder="Pick a platform" />

With Dividers

<Select variant="outlined" placeholder="Pick a platform" />

Controlled

Selected: web

<ControlledSelect />

Multiple

Selected: web, ios

<MultiSelect />

Select API reference