Select · base-ui-svelte

API Reference

Props mirror Base UI React where applicable, adapted for Svelte 5. Native HTML attributes for the rendered element are also accepted unless noted.

Select.Root

Extends div HTML attributes.

Property	Type	Default	Description
`value`	`string \| null \| undefined`	`—`	Controlled value.
`defaultValue`	`string \| null`	`—`	Uncontrolled initial value.
`onValueChange`	`((value: string \| null, event: Event) => void) \| undefined`	`—`	Event handler called when the value changes.
`open`	`boolean \| undefined`	`—`	Whether the component is open (controlled).
`defaultOpen`	`boolean`	`—`	Whether the component is initially open (uncontrolled).
`onOpenChange`	`((open: boolean, eventDetails: { reason: OpenChangeReason }) => void) \| undefined`	`—`	Event handler called when the open state changes.
`disabled`	`boolean`	`false`	Whether the control ignores user interaction.
`name`	`string \| undefined`	`—`	—
`children`	`Snippet<[{ value: string \| null; open: boolean; disabled: boolean }]>`	`—`	Content rendered inside the part.

Data attribute	Description
`data-closed`	Present when the part is closed.
`data-disabled`	Present when the part is disabled.
`data-open`	Present when the part is open.

Select.Arrow

Extends span HTML attributes.

Property	Type	Default	Description
`children`	`Snippet`	`—`	Content rendered inside the part.

Data attribute	Description
`data-closed`	Present when the part is closed.
`data-open`	Present when the part is open.

Select.Backdrop

Extends div HTML attributes.

Property	Type	Default	Description
`render`	`string`	`—`	HTML element tag to render instead of the default host element.
`children`	`Snippet`	`—`	Content rendered inside the part.

Data attribute	Description
`data-closed`	Present when the part is closed.
`data-open`	Present when the part is open.

Select.Group

Extends div HTML attributes.

Property	Type	Default	Description
`children`	`Snippet`	`—`	Content rendered inside the part.

Select.GroupLabel

Extends div HTML attributes.

Property	Type	Default	Description
`children`	`Snippet`	`—`	Content rendered inside the part.

Select.Icon

Extends span HTML attributes.

Property	Type	Default	Description
`children`	`Snippet`	`—`	Content rendered inside the part.

Data attribute	Description
`data-closed`	Present when the part is closed.
`data-open`	Present when the part is open.

Select.Item

Extends div HTML attributes.

Property	Type	Default	Description
`value`	`string`	`—`	Controlled value.
`disabled`	`boolean`	`false`	Whether the control ignores user interaction.
`children`	`Snippet<[{ selected: boolean; highlighted: boolean; disabled: boolean }]>`	`—`	Content rendered inside the part.

Data attribute	Description
`data-disabled`	Present when the part is disabled.
`data-highlighted`	Present when the item is highlighted.
`data-selected`	Present when the item is selected.

Select.ItemIndicator

Extends span HTML attributes.

Property	Type	Default	Description
`children`	`Snippet`	`—`	Content rendered inside the part.

Data attribute	Description
`data-disabled`	Present when the part is disabled.
`data-selected`	Present when the item is selected.

Select.ItemText

Extends span HTML attributes.

Property	Type	Default	Description
`children`	`Snippet`	`—`	Content rendered inside the part.

Data attribute	Description
`data-highlighted`	Present when the item is highlighted.
`data-select-item-text`	Present on the element when applicable.
`data-selected`	Present when the item is selected.

Select.Label

Extends label HTML attributes.

Property	Type	Default	Description
`children`	`Snippet`	`—`	Content rendered inside the part.

Data attribute	Description
`data-disabled`	Present when the part is disabled.

Select.List

Extends div HTML attributes.

Property	Type	Default	Description
`children`	`Snippet`	`—`	Content rendered inside the part.

Data attribute	Description
`data-closed`	Present when the part is closed.
`data-open`	Present when the part is open.

Select.Popup

Extends div HTML attributes.

Property	Type	Default	Description
`render`	`string`	`—`	HTML element tag to render instead of the default host element.
`children`	`Snippet`	`—`	Content rendered inside the part.

Data attribute	Description
`data-closed`	Present when the part is closed.
`data-ending-style`	Present while the exit animation can run.
`data-open`	Present when the part is open.
`data-starting-style`	Present while the enter animation can run.

Select.Portal

Property	Type	Default	Description
`children`	`Snippet`	`—`	Content rendered inside the part.

Select.Positioner

Extends div HTML attributes.

Property	Type	Default	Description
`side`	`Side`	`—`	—
`align`	`Align`	`—`	—
`sideOffset`	`number`	`—`	—
`children`	`Snippet`	`—`	Content rendered inside the part.

Data attribute	Description
`data-closed`	Present when the part is closed.
`data-open`	Present when the part is open.

Select.ScrollDownArrow

Extends button HTML attributes.

Property	Type	Default	Description
`children`	`Snippet`	`—`	Content rendered inside the part.

Data attribute	Description
`data-direction`	Present on the element when applicable.
`data-hidden`	Present on the element when applicable.

Select.ScrollUpArrow

Extends button HTML attributes.

Property	Type	Default	Description
`children`	`Snippet`	`—`	Content rendered inside the part.

Data attribute	Description
`data-direction`	Present on the element when applicable.
`data-hidden`	Present on the element when applicable.

Select.Separator

Extends div HTML attributes.

No component-specific props — HTML attributes and children only.

Select.Trigger

Extends button HTML attributes.

Property	Type	Default	Description
`render`	`string`	`—`	HTML element tag to render instead of the default host element.
`disabled`	`boolean`	`false`	Whether the control ignores user interaction.
`children`	`Snippet`	`—`	Content rendered inside the part.

Data attribute	Description
`data-closed`	Present when the part is closed.
`data-disabled`	Present when the part is disabled.
`data-open`	Present when the part is open.

Select.Value

Extends span HTML attributes.

Property	Type	Default	Description
`placeholder`	`string`	`—`	—
`children`	`Snippet<[string \| null]>`	`—`	Content rendered inside the part.

Data attribute	Description
`data-placeholder`	Present when showing placeholder content.