Report an issue

Select

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

	<script lang="ts">
  import { Select } from "bits-ui";
  import { CaretUpDown, Check, Palette } from "$icons/index.js";
 
  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" },
    { value: "ocean-blue", label: "Ocean Blue" },
    { value: "sunset-red", label: "Sunset Red" },
    { value: "forest-green", label: "Forest Green" },
    { value: "lavender-purple", label: "Lavender Purple" },
    { value: "mustard-yellow", label: "Mustard Yellow" },
    { value: "slate-gray", label: "Slate Gray" },
    { value: "neon-green", label: "Neon Green" },
    { value: "coral-reef", label: "Coral Reef" },
    { value: "midnight-blue", label: "Midnight Blue" },
    { value: "crimson-red", label: "Crimson Red" },
    { value: "mint-green", label: "Mint Green" },
    { value: "pastel-pink", label: "Pastel Pink" },
    { value: "golden-yellow", label: "Golden Yellow" },
    { value: "deep-purple", label: "Deep Purple" },
    { value: "turquoise-blue", label: "Turquoise Blue" },
    { value: "burnt-orange", label: "Burnt Orange" }
  ];
</script>
 
<form class="flex flex-col gap-4">
  <Select.Root name="hello">
    <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 "
      aria-label="Select a theme"
    >
      <Palette class="mr-[9px] size-6 text-muted-foreground" />
      <Select.Value class="text-sm" placeholder="Select a theme" />
      <CaretUpDown class="ml-auto size-6 text-muted-foreground" />
    </Select.Trigger>
    <Select.Portal>
      <Select.Content
        class="focus-override z-50 max-h-96 w-full min-w-[296px] rounded-xl border border-muted bg-background px-1 py-3 shadow-popover outline-none"
        sideOffset={8}
        sameWidth={true}
      >
        <Select.ScrollUpButton class="flex w-full items-center justify-center"
          >up</Select.ScrollUpButton
        >
        <Select.Viewport class="p-1">
          {#each themes as theme}
            <Select.Item
              class="focus-override 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 focus:outline-none focus-visible:outline-none data-[highlighted]:bg-muted"
              value={theme.value}
            >
              {#snippet children({ selected })}
                <Select.ItemText>
                  {theme.label}
                </Select.ItemText>
                {#if selected}
                  <span class="ml-auto">
                    <Check />
                  </span>
                {/if}
              {/snippet}
            </Select.Item>
          {/each}
        </Select.Viewport>
        <Select.ScrollDownButton class="flex w-full items-center justify-center"
          >down</Select.ScrollDownButton
        >
      </Select.Content>
    </Select.Portal>
  </Select.Root>
</form>

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>

API Reference

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
items
Selected[]

An array of items to add type-safety to the onSelectedChange callback.

Default: undefined
onOutsideClick
function

A callback function called when a click occurs outside of the element. If event.preventDefault() is called, the default behavior of closing the element will be prevented.

Default: undefined
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
el
HTMLButtonElement

The underlying DOM element being rendered. You can bind to this to programatically interact with the element.

Default: undefined
Slot Property Type Description
builder
object

The builder attributes and actions 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
el
HTMLDivElement

The underlying DOM element being rendered. You can bind to this to programatically interact with the element.

Default: undefined
Slot Property Type Description
builder
object

The builder attributes and actions 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
el
HTMLDivElement

The underlying DOM element being rendered. You can bind to this to programatically interact with the element.

Default: undefined
Slot Property Type Description
isSelected
boolean

Whether or not the item is selected.

builder
object

The builder attributes and actions 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-highlighted
——

Present when the item is highlighted, via keyboard navigation or hover.

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.

data-placeholder
——

Present when the placeholder is being displayed (there isn't a value selected). You can use this to style the placeholder differently than the selected value.

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
el
HTMLDivElement

The underlying DOM element being rendered. You can bind to this to programatically interact with the element.

Default: undefined
Slot Property Type Description
builder
object

The builder attributes and actions 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
el
HTMLLabelElement

The underlying DOM element being rendered. You can bind to this to programatically interact with the element.

Default: undefined
Slot Property Type Description
builder
object

The builder attributes and actions 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
el
HTMLInputElement

The underlying DOM element being rendered. You can bind to this to programatically interact with the element.

Default: undefined
Slot Property Type Description
builder
object

The builder attributes and actions 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
el
HTMLDivElement

The underlying DOM element being rendered. You can bind to this to programatically interact with the element.

Default: undefined
Slot Property Type Description
builder
object

The builder attributes and actions 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
size
number

The height and width of the arrow in pixels.

Default: 8
asChild
boolean

Whether to use render delegation with this component or not.

Default: false
el
HTMLDivElement

The underlying DOM element being rendered. You can bind to this to programatically interact with the element.

Default: undefined
Slot Property Type Description
builder
object

The builder attributes and actions to apply to the element if using the asChild prop with delegation.

Data Attribute Value Description
data-arrow
——

Present on the arrow element.