Select

Displays a list of options for the user to pick from, triggered by a button.

Basic

A simple fruit selector with five options.

With Groups

Items organized into labeled groups with a separator.

Usage

julia

using Suite

Select(
    SelectTrigger(
        SelectValue(placeholder="Select a fruit"),
    ),
    SelectContent(
        SelectItem(value="apple", "Apple"),
        SelectItem(value="banana", "Banana"),
        SelectItem(value="orange", "Orange"),
    ),
)

Keyboard Interactions

Key	Action
`Arrow Down`	Move focus to the next item
`Arrow Up`	Move focus to the previous item
`Enter / Space`	Select the focused item
`Escape`	Close the select dropdown
`Home`	Move focus to the first item
`End`	Move focus to the last item
`Type-ahead`	Search by typing (1s timeout)

API Reference

Select

Prop	Type	Default	Description
children...	Any	-	Select sub-components

SelectTrigger

Prop	Type	Default	Description
children...	Any	-	Trigger content (shows selected value)

SelectValue

Prop	Type	Default	Description
placeholder	String	"Select an option"	Text shown when no value is selected

SelectContent

Prop	Type	Default	Description
children...	Any	-	Content items and groups
class	String	""	Additional CSS classes

SelectItem

Prop	Type	Default	Description
value	String	-	Unique value for this item (required)
disabled	Bool	false	Disable this item
children...	Any	-	Item display text

SelectGroup

Prop	Type	Default	Description
children...	Any	-	Group label and items (container)

SelectLabel

Prop	Type	Default	Description
children...	Any	-	Group label text

SelectSeparator

Prop	Type	Default	Description
class	String	""	Additional CSS classes

SelectScrollUpButton

Prop	Type	Default	Description
class	String	""	Additional CSS classes

SelectScrollDownButton

Prop	Type	Default	Description
class	String	""	Additional CSS classes