Select

The Select component provides a dropdown menu for selecting a single value from a list of options. It’s designed with an accessible and customizable interface that supports groups, search, and keyboard navigation.

Usage

<script>
  import { 
    Select,
    SelectTrigger,
    SelectContent, 
    SelectItem 
  } from "$lib/components/ui/select";
</script>

<Select>
  <SelectTrigger>
    <span>Select an option</span>
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="option1">Option 1</SelectItem>
    <SelectItem value="option2">Option 2</SelectItem>
    <SelectItem value="option3">Option 3</SelectItem>
  </SelectContent>
</Select>

Examples

Basic Select

A simple select component with a few options.

With Placeholder

A select component with a placeholder.

Disabled

A disabled select component.

With Grouped Items

A select component with grouped options.

With Default Value

A select component with a preset value.

With Form Label

A select component with a form label for accessibility.

Browser

Select your preferred browser.

With Disabled Items

A select component with disabled options.

API Reference

Select Components

Component	Description
`Select`	The root component that manages selection state.
`SelectTrigger`	The button that toggles the select dropdown.
`SelectContent`	The floating content that contains the select items.
`SelectItem`	The selectable option.
`SelectGroup`	A group of related select items.
`SelectGroupHeading`	A label for a group of select items.
`SelectSeparator`	A visual separator between items or groups.
`SelectScrollUpButton`	A button to scroll up through the select content.
`SelectScrollDownButton`	A button to scroll down through the select content.

Select Properties

Property	Type	Default	Description
`value`	`string`	`undefined`	The selected value.
`open`	`boolean`	`false`	Whether the select is open.
`disabled`	`boolean`	`false`	Whether the select is disabled.
`required`	`boolean`	`false`	Whether a value is required.
`onSelectedChange`	`function`	`undefined`	Callback fired when selection changes.
`onOpenChange`	`function`	`undefined`	Callback fired when the open state changes.

SelectItem Properties

Property	Type	Default	Description
`value`	`string`	`undefined`	The value of the item.
`label`	`string`	`undefined`	The label to display if no children are provided.
`disabled`	`boolean`	`false`	Whether the item is disabled.

SelectTrigger Properties

Property	Type	Default	Description
`placeholder`	`string`	`undefined`	Placeholder text to display.
`class`	`string`	`undefined`	Custom CSS classes.

SelectContent Properties

Property	Type	Default	Description
`sideOffset`	`number`	`4`	Distance from the trigger.
`class`	`string`	`undefined`	Custom CSS classes.
`portalProps`	`object`	`undefined`	Props for the portal component.

Implementation

The Select component is built on top of bits-ui primitives. It uses CSS transitions for smooth animations and includes styling for hover, focus, disabled states, and more:

// SelectTrigger styling
"border-input ring-offset-background data-[placeholder]:text-muted-foreground focus:ring-ring flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border bg-transparent px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-1 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1"

// SelectContent styling
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-popover text-popover-foreground relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border shadow-md"

// SelectItem styling
"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50"

The component is built with accessibility in mind, ensuring keyboard navigation, proper ARIA attributes, and focus management for a great user experience.