Select

Enable users to choose a single option from a dropdown menu that presents a list of selectable items.

	<script lang="ts">
  import * as Select from "@/components//ui/select";
 
  const fruits = [
    { value: "apple", label: "Apple" },
    { value: "banana", label: "Banana" },
    { value: "blueberry", label: "Blueberry" },
    { value: "grapes", label: "Grapes" },
    { value: "pineapple", label: "Pineapple" }
  ];
</script>
 
<Select.Root>
  <Select.Trigger class="w-[180px]">
    <Select.Value placeholder="Select a fruit" />
  </Select.Trigger>
  <Select.Content>
    <Select.Group>
      <Select.Label>Fruits</Select.Label>
      {#each fruits as fruit}
        <Select.Item value={fruit.value} label={fruit.label}
          >{fruit.label}</Select.Item
        >
      {/each}
    </Select.Group>
  </Select.Content>
  <Select.Input name="favoriteFruit" />
</Select.Root>

	<script lang="ts">
  import * as Select from "@/components//ui/select";
 
  const fruits = [
    { value: "apple", label: "Apple" },
    { value: "banana", label: "Banana" },
    { value: "blueberry", label: "Blueberry" },
    { value: "grapes", label: "Grapes" },
    { value: "pineapple", label: "Pineapple" }
  ];
</script>
 
<Select.Root>
  <Select.Trigger class="w-[180px]">
    <Select.Value placeholder="Select a fruit" />
  </Select.Trigger>
  <Select.Content>
    <Select.Group>
      <Select.Label>Fruits</Select.Label>
      {#each fruits as fruit}
        <Select.Item value={fruit.value} label={fruit.label}
          >{fruit.label}</Select.Item
        >
      {/each}
    </Select.Group>
  </Select.Content>
  <Select.Input name="favoriteFruit" />
</Select.Root>

Structure

	<script lang="ts">
  import { Select } from "bits-ui";
</script>
 
<Select.Root>
  <Select.Trigger>
    <Select.Value />
  </Select.Trigger>
 
  <Select.Content>
    <Select.Item>
      <Select.ItemIndicator />
    </Select.Item>
 
    <Select.Group>
      <Select.Label />
      <Select.Item>
        <Select.ItemIndicator />
      </Select.Item>
    </Select.Group>
 
    <Select.Arrow />
  </Select.Content>
</Select.Root>

	<script lang="ts">
  import { Select } from "bits-ui";
</script>
 
<Select.Root>
  <Select.Trigger>
    <Select.Value />
  </Select.Trigger>
 
  <Select.Content>
    <Select.Item>
      <Select.ItemIndicator />
    </Select.Item>
 
    <Select.Group>
      <Select.Label />
      <Select.Item>
        <Select.ItemIndicator />
      </Select.Item>
    </Select.Group>
 
    <Select.Arrow />
  </Select.Content>
</Select.Root>

Component API

Select.Root

The root select component which manages & scopes the state of the select.

Property	Type	Description
`disabled`	`boolean`	Whether or not the select menu is disabled. `Default: false`
`multiple`	`boolean`	Whether or not the select menu allows multiple selections. `Default: false`
`preventScroll`	`boolean`	Whether or not to prevent scrolling the body when the menu is open. `Default: true`
`closeOnEscape`	`boolean`	Whether to close the select menu when the escape key is pressed. `Default: true`
`closeOnOutsideClick`	`boolean`	Whether to close the select menu when a click occurs outside of it. `Default: true`
`loop`	`boolean`	Whether or not to loop through the menu items when navigating with the keyboard. `Default: false`
`open`	`boolean`	The open state of the select menu. `Default: false`
`onOpenChange`	`(open: boolean) => void`	A callback that is fired when the select menu's open state changes. `Default: —— undefined`
`positioning`	`FloatingConfig`	The positioning configuration for the select menu. (docs coming soon) `Default: —— undefined`
`value`	`string`	The value of the currently selected item. `Default: —— undefined`
`onValueChange`	`(value: string \| undefined) => void`	A callback that is fired when the select menu's value changes. `Default: —— undefined`
`value`	`string[]`	The values of the currently selected items, when `multiple` is `true`. `Default: —— undefined`
`onValueChange`	`(value: string[]) => void`	A callback that is fired when the select menu's values change, when `multiple` is `true`. `Default: —— undefined`

Select.Trigger

The button element which toggles the select menu's open state.

Property	Type	Description
`asChild`	`boolean`	Whether to use render delegation with this component or not. `Default: false`

Data Attribute	Description/Value
`data-state`	The dropdown menu's open state. `Value: 'open' \| 'closed'`
`data-disabled`	Present when the trigger is disabled. `Value: ''`

Select.Content

The content/menu element which contains the select menu's items.

Property	Type	Description
`asChild`	`boolean`	Whether to use render delegation with this component or not. `Default: false`

Select.Item

A select item, which must be a child of the `Select.Content` component.

Property	Type	Description
`asChild`	`boolean`	Whether to use render delegation with this component or not. `Default: false`
`label`	`string`	The label of the select item, which is displayed in the menu. `Default: —— undefined`
`value`	`unknown`	The value of the select item. `Default: —— undefined`
`disabled`	`boolean`	Whether or not the select item is disabled. This will prevent interaction/selection. `Default: false`

Select.Value

A representation of the select menu's value, which is typically displayed in the trigger.

Property	Type	Description
`asChild`	`boolean`	Whether to use render delegation with this component or not. `Default: false`
`placeholder`	`string`	A placeholder value to display when no value is selected. `Default: —— undefined`

Select.Group

An accessible group of select menu items.

Property	Type	Description
`asChild`	`boolean`	Whether to use render delegation with this component or not. `Default: false`

Select.Label

A label for the select menu which will be skipped when navigating with the keyboard. This must be a child of the `Select.Group` component to be accessible.

Property	Type	Description
`asChild`	`boolean`	Whether to use render delegation with this component or not. `Default: false`

Select.Input

A hidden input element which is used to store the select menu's value, used for form submission. It receives the same value as the `Select.Value` component and can receive any props that a normal input element can receive.

Property	Type	Description
`asChild`	`boolean`	Whether to use render delegation with this component or not. `Default: false`

Select.Separator

A visual separator for use between select items or groups.

Select.Arrow

An optional arrow element which points to the trigger when open.

Property	Type	Description
`asChild`	`boolean`	Whether to use render delegation with this component or not. `Default: false`
`size`	`number`	The height and width of the arrow in pixels. `Default: 8`

Data Attribute	Description/Value
`data-arrow`	Present on the arrow element. `Value: ''`

🚧 UNDER CONSTRUCTION 🚧