Select

Enables users to choose from a list of options presented in a dropdown.

	<script lang="ts">
  import { Select } from "$lib";
  import { flyAndScale } from "@/utils";
  import { Check, Palette, CaretUpDown } from "phosphor-svelte";
 
  const themes = [
    { value: "light-monochrome", label: "Light Monochrome" },
    { value: "dark-green", label: "Dark Green" },
    { value: "svelte-orange", label: "Svelte Orange" },
    { value: "punk-pink", label: "Punk Pink" }
  ];
</script>
 
<Select.Root>
  <Select.Trigger
    class="inline-flex h-input w-[296px] items-center rounded-9px border border-border-input bg-background px-[11px] text-sm transition-colors placeholder:text-foreground-alt/50  focus:outline-none focus:ring-2 focus:ring-foreground focus:ring-offset-2 focus:ring-offset-background"
    aria-label="Select a theme"
  >
    <Palette class="mr-[9px] text-muted-foreground sq-6" />
    <Select.Value class="text-sm" placeholder="Select a theme" />
    <CaretUpDown class="ml-auto text-muted-foreground sq-6" />
  </Select.Trigger>
  <Select.Content
    class="w-full rounded-xl border border-muted bg-background px-1 py-3 shadow-popover outline-none"
    transition={flyAndScale}
    sideOffset={8}
  >
    {#each themes as theme}
      <Select.Item
        class="flex h-10 w-full select-none items-center rounded-button py-3 pl-5 pr-1.5 text-sm outline-none transition-all duration-75 data-[highlighted]:bg-muted/50 data-[selected]:bg-muted"
        value={theme.value}
        label={theme.label}
      >
        {theme.label}
        <Select.ItemIndicator class="ml-auto" asChild={false}>
          <Check />
        </Select.ItemIndicator>
      </Select.Item>
    {/each}
  </Select.Content>
  <Select.Input name="favoriteFruit" />
</Select.Root>

	<script lang="ts">
  import { Select } from "$lib";
  import { flyAndScale } from "@/utils";
  import { Check, Palette, CaretUpDown } from "phosphor-svelte";
 
  const themes = [
    { value: "light-monochrome", label: "Light Monochrome" },
    { value: "dark-green", label: "Dark Green" },
    { value: "svelte-orange", label: "Svelte Orange" },
    { value: "punk-pink", label: "Punk Pink" }
  ];
</script>
 
<Select.Root>
  <Select.Trigger
    class="inline-flex h-input w-[296px] items-center rounded-9px border border-border-input bg-background px-[11px] text-sm transition-colors placeholder:text-foreground-alt/50  focus:outline-none focus:ring-2 focus:ring-foreground focus:ring-offset-2 focus:ring-offset-background"
    aria-label="Select a theme"
  >
    <Palette class="mr-[9px] text-muted-foreground sq-6" />
    <Select.Value class="text-sm" placeholder="Select a theme" />
    <CaretUpDown class="ml-auto text-muted-foreground sq-6" />
  </Select.Trigger>
  <Select.Content
    class="w-full rounded-xl border border-muted bg-background px-1 py-3 shadow-popover outline-none"
    transition={flyAndScale}
    sideOffset={8}
  >
    {#each themes as theme}
      <Select.Item
        class="flex h-10 w-full select-none items-center rounded-button py-3 pl-5 pr-1.5 text-sm outline-none transition-all duration-75 data-[highlighted]:bg-muted/50 data-[selected]:bg-muted"
        value={theme.value}
        label={theme.label}
      >
        {theme.label}
        <Select.ItemIndicator class="ml-auto" asChild={false}>
          <Check />
        </Select.ItemIndicator>
      </Select.Item>
    {/each}
  </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`	`function`	A callback that is fired when the select menu's open state changes. `Default: —— undefined`
`selected`	`object`	The value of the currently selected item. `Default: —— undefined`
`onSelectedChange`	`function`	A callback that is fired when the select menu's value changes. `Default: —— undefined`
`portal`	`union`	Where to render the select menu when it is open. Defaults to the body. Can be disabled by passing `null` `Default: —— undefined`
`highlightOnHover`	`boolean`	Whether or not to highlight the currently hovered item. `Default: true`
`name`	`string`	The name to apply to the hidden input element for form submission. `Default: —— undefined`
`required`	`boolean`	Whether or not the select menu is required. `Default: false`
`scrollAlignment`	`enum`	The alignment of the highlighted item when scrolling. `Default: 'nearest'`
`typeahead`	`boolean`	Whether or not to enable typeahead functionality. When enabled, the user can type to navigate to menu items. `Default: true`

Slot Property	Type	Description
`ids`	`object`	The ids of the elements within the component, useful when you don't necessarily want to provide a custom ID, but still want access to the ID being assigned (if any).

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`

Slot Property	Type	Description
`builder`	`object`	The builder attributes and actions to apply to the element if using the `asChild` prop with delegation.
`attrs`	`object`	Additional attributes to apply to the element if using the `asChild` prop with delegation.

Data Attribute	Value	Description
`data-state`	`enum`	The dropdown menu's open state.
`data-disabled`	`——`	Present when the trigger is disabled.
`data-select-trigger`	`——`	Present on the trigger element.

Select.Content

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

Property	Type	Description
`transition`	`function`	A Svelte transition function to use when transitioning the content in and out. `Default: —— undefined`
`transitionConfig`	`TransitionConfig`	The configuration to apply to the transition. `Default: —— undefined`
`inTransition`	`function`	A Svelte transition function to use when transitioning the content in and out. `Default: —— undefined`
`inTransitionConfig`	`TransitionConfig`	The configuration to apply to the transition. `Default: —— undefined`
`outTransition`	`function`	A Svelte transition function to use when transitioning the content in and out. `Default: —— undefined`
`outTransitionConfig`	`TransitionConfig`	The configuration to apply to the transition. `Default: —— undefined`
`side`	`enum`	The preferred side of the anchor to render against when open. Will be reversed when collisions occur. Floating UI reference. `Default: —— undefined`
`sideOffset`	`number`	The amount of offset to apply to the menu's position on the x-axis. Floating UI reference. `Default: 0`
`align`	`enum`	The preferred alignment of the anchor to render against when open. Floating UI reference. `Default: —— undefined`
`alignOffset`	`number`	An offset in pixels from the 'start' or 'end' alignment options. Floating UI reference. `Default: 0`
`avoidCollisions`	`boolean`	When `true`, overrides the `side` and `align` options to prevent collisions with the boundary edges. Floating UI reference. `Default: true`
`collisionBoundary`	`union`	A boundary element or array of elements to check for collisions against. Floating UI reference. `Default: —— undefined`
`collisionPadding`	`number`	The amount in pixels of virtual padding around the viewport edges to check for overflow which will cause a collision. Floating UI reference. `Default: 0`
`fitViewport`	`boolean`	Whether the floating element should be constrained to the viewport. Floating UI reference. `Default: false`
`sameWidth`	`boolean`	Whether the content should be the same width as the trigger. Floating UI reference. `Default: false`
`strategy`	`enum`	The positioning strategy to use for the floating element. Floating UI reference. `Default: absolute`
`overlap`	`boolean`	Whether the floating element can overlap the reference element. Floating UI reference. `Default: false`
`asChild`	`boolean`	Whether to use render delegation with this component or not. `Default: false`

Slot Property	Type	Description
`builder`	`object`	The builder attributes and actions to apply to the element if using the `asChild` prop with delegation.
`attrs`	`object`	Additional attributes to apply to the element if using the `asChild` prop with delegation.

Data Attribute	Value	Description
`data-select-content`	`——`	Present on the content element.

Select.Item

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

Property	Type	Description
`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`
`asChild`	`boolean`	Whether to use render delegation with this component or not. `Default: false`

Slot Property	Type	Description
`builder`	`object`	The builder attributes and actions to apply to the element if using the `asChild` prop with delegation.
`attrs`	`object`	Additional attributes to apply to the element if using the `asChild` prop with delegation.

Data Attribute	Value	Description
`data-state`	`enum`	The state of the item.
`data-disabled`	`——`	Present when the item is disabled.
`data-select-item`	`——`	Present on the item element.

Select.Value

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

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

Slot Property	Type	Description
`attrs`	`object`	Additional attributes to apply to the element if using the `asChild` prop with delegation.
`label`	`string`	The label of the currently selected item.

Data Attribute	Value	Description
`data-select-value`	`——`	Present on the value element.

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`

Slot Property	Type	Description
`builder`	`object`	The builder attributes and actions to apply to the element if using the `asChild` prop with delegation.
`attrs`	`object`	Additional attributes to apply to the element if using the `asChild` prop with delegation.

Data Attribute	Value	Description
`data-select-group`	`——`	Present on the group element.

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`

Slot Property	Type	Description
`builder`	`object`	The builder attributes and actions to apply to the element if using the `asChild` prop with delegation.
`attrs`	`object`	Additional attributes to apply to the element if using the `asChild` prop with delegation.

Data Attribute	Value	Description
`data-select-label`	`——`	Present on the label element.

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`

Slot Property	Type	Description
`builder`	`object`	The builder attributes and actions to apply to the element if using the `asChild` prop with delegation.
`attrs`	`object`	Additional attributes to apply to the element if using the `asChild` prop with delegation.

Select.Separator

A visual separator for use between select items or groups.

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

Slot Property	Type	Description
`builder`	`object`	The builder attributes and actions to apply to the element if using the `asChild` prop with delegation.
`attrs`	`object`	Additional attributes to apply to the element if using the `asChild` prop with delegation.

Data Attribute	Value	Description
`data-separator-root`	`——`	Present on the separator element.

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`

Slot Property	Type	Description
`builder`	`object`	The builder attributes and actions to apply to the element if using the `asChild` prop with delegation.
`attrs`	`object`	Additional attributes to apply to the element if using the `asChild` prop with delegation.

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

🚧 UNDER CONSTRUCTION 🚧