Select

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

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

Root

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

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

Trigger

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

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

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

Content

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

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

Item

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

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

Value

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

Prop	Default	Type/Description
`asChild`	`false`	`boolean` Whether to use render delegation with this component or not.
`placeholder`	-	`string` A placeholder value to display when no value is selected.

Group

An accessible group of select menu items.

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

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.

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

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.

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

Separator

A visual separator for use between select items or groups.

Arrow

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

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

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

🚧 UNDER CONSTRUCTION 🚧