Select

A highly customizable and flexible select component for making dropdown selections.

Report Issue Github

Usage

The Select component is built for user-friendly dropdown selections with varied styling options.

Basic Usage

A straightforward select menu with item choices.


<Select.Root defaultValue="apple">
  <Select.Trigger />
  <Select.Content
    items={[
      {
        value: 'apple',
        label: 'Apple',
      },
      {
        value: 'orange',
        label: 'Orange',
      },
    ]}
  ></Select.Content>
</Select.Root>

Placement

You can adjust the placement of the dropdown using the placement prop.


<Select.Root defaultValue="apple">
  <Select.Trigger />
  <Select.Content
    placement="right"
    items={[
      {
        value: 'apple',
        label: 'Apple',
      },
      {
        value: 'orange',
        label: 'Orange',
      },
    ]}
  ></Select.Content>
</Select.Root>

Variants

The Select component can be styled in various visual appearances.


<Select.Root defaultValue="apple" variant="ghost">
  <Select.Trigger />
  <Select.Content
    items={[
      {
        value: 'apple',
        label: 'Apple',
      },
      {
        value: 'orange',
        label: 'Orange',
      },
    ]}
  ></Select.Content>
</Select.Root>

Size

The Select component can be sized using size props.


<Flex>
  <Select.Root size={'small'} defaultValue="apple" variant="outlined">
    <Select.Trigger />
    <Select.Content
      items={[
        {
          value: 'apple',
          label: 'Apple',
        },
        {
          value: 'orange',
          label: 'Orange',
        },
      ]}
    ></Select.Content>
  </Select.Root>
  <Select.Root size={'medium'} defaultValue="apple" variant="outlined">
    <Select.Trigger />
    <Select.Content
      items={[
        {
          value: 'apple',
          label: 'Apple',
        },
        {
          value: 'orange',
          label: 'Orange',
        },
      ]}
    ></Select.Content>
  </Select.Root>
  <Select.Root size={'large'} defaultValue="apple" variant="outlined">
    <Select.Trigger />
    <Select.Content
      items={[
        {
          value: 'apple',
          label: 'Apple',
        },
        {
          value: 'orange',
          label: 'Orange',
        },
      ]}
    ></Select.Content>
  </Select.Root>
</Flex>

API

Props

Root

Prop	Type	Default	Required
`className`	`string`	-	-
`style`	`CSSProperties`	-	-
`children`	`ReactNode`	-	-
`variant`	`'solid' \| 'ghost' \| 'outlined' \| 'transparent'`	`-`	-
`defaultValue`	`string`	`-`	-
`placeholder`	`string`	`-`	-
`MarginProps`	`Token<MarginProps>`	-	-
`color`	`ThemeAccentColor`	-	-
`radius`	`ThemeRadius`	-	-
`size`	`Responsive<Size>`	`'medium'`	-
`highContrast`	`boolean`	-	-
`shadow`	`ThemeShadow`	-	-

Trigger

Prop	Type	Default	Required

Content

Prop	Type	Default	Required
`className`	`string`	-	-
`style`	`CSSProperties`	-	-
`children`	`ReactNode`	-	-
`placement`	`'top' \| 'bottom' \| 'left' \| 'right'`	`-`	-
`items`	`Item`	-	Yes

Item

Prop	Type	Default	Required
`className`	`string`	-	-
`style`	`CSSProperties`	-	-
`children`	`ReactNode`	-	-
`value`	`string`	-	Yes

Segmented

Slider