Select

Example

Usage

		<Select
	bind:value={selected}
	type="single"
	items={[
		{ value: 'Apple', label: 'Apple' },
		{ value: 'Orange', label: 'Orange' },
		{ value: 'Banana', label: 'Banana' }
	]}
/>

API Reference

Select

A dropdown select menu. Built on top of the bits-ui Select primitive.

Property Type Description

value $bindable

union

The currently selected value. Default: —

items required

array

The list of items to display in the select dropdown.

placeholder

string

Placeholder text shown when no value is selected. Default: —

type

enum

Whether the select allows single or multiple selections. Default: 'single'

open $bindable

boolean

Whether the select dropdown is open. Default: false

onValueChange

function

A callback invoked when the selected value changes. Default: —

onOpenChange

function

A callback invoked when the dropdown open state changes. Default: —

disabled

boolean

Whether the select is disabled. Default: false

name

string

The name of the select used in form submission. Default: —

required

boolean

Whether the select is required. Default: false

loop

boolean

Whether keyboard navigation loops from last item to first and vice versa. Default: false

allowDeselect

boolean

Whether the user can deselect the selected item. Default: false

contentProps

Select.ContentProps

Additional props to pass to the underlying Select.Content component (positioning, collision, etc.). Default: —

Property

value

items

placeholder

type

open

onValueChange

onOpenChange

disabled

name

required

loop

allowDeselect

contentProps