Select

Displays a list of options for the user to pick from

Interactive-mode

Installation instructions

Select's dropdown renders through the shared Popover infrastructure, so the same setup applies:

Register the BlazorUI services in Program.cs:
```
builder.Services.AddSitecoreBlokUI();
```
Place a single <Popovers /> container in your root layout:
```
<Popovers @rendermode="InteractiveServer" />
```

Divergence from Blok

Now composable: SelectTrigger + SelectValue + SelectContent are separate components. Previously the entire trigger button + popover was bundled inside Select. To match Blok, you now compose SelectTrigger (the visible button), SelectValue (the placeholder/value display), and SelectContent (the open menu). Placeholder moved from Select onto SelectValue. SelectGroup no longer takes a Label string param — use the new SelectLabel component as a child instead.

Examples

Default

With groups

Small trigger

API

The element family below can be composed together. Click an element to jump to its properties.

Element	Purpose
Select	Root of the select. Owns the bound `Value`, cascades itself to children, and drives the shared `PopoverService` to open / close the dropdown.
SelectTrigger	The visible button that opens the dropdown. Shows the current `SelectValue` and a chevron icon, and wires the anchor reference used to position the popover.
SelectValue	Displays the label of the current `Select.Value`, or the `Placeholder` when nothing is selected. Always placed inside a `SelectTrigger`.
SelectContent	Dropdown menu that renders through the shared `Popovers` host. Hosts `SelectGroup`, `SelectItem`, `SelectSeparator`, etc.
SelectGroup	Logical grouping of items inside `SelectContent`. Usually accompanied by a `SelectLabel` as its first child.
SelectLabel	Small uppercase heading rendered at the top of a `SelectGroup`.
SelectItem	A single option. Renders its `Label` (falling back to `ChildContent`, then `Value`) plus a check icon when selected.
SelectSeparator	Thin horizontal divider between groups or items inside `SelectContent`.
SelectScrollUpButton	Decorative chevron-up indicator rendered above a long item list. Currently cosmetic — no auto-scroll behaviour wired.
SelectScrollDownButton	Decorative chevron-down indicator rendered below a long item list. Currently cosmetic — no auto-scroll behaviour wired.

Select

Root of the select. Owns the bound Value, cascades itself to children, and drives the shared PopoverService to open / close the dropdown.

Property	Type	Description
Value	string?	The currently-selected item value. Use `@bind-Value` for two-way binding.
ValueChanged	EventCallback<string?>	Fires when the user picks a different item. Part of the `@bind-Value` pair.
Disabled	bool	When true, the trigger is non-interactive and the dropdown will not open. Default: `false`.
ChildContent	RenderFragment?	Should contain a `SelectTrigger` and a `SelectContent`.

SelectTrigger

The visible button that opens the dropdown. Shows the current SelectValue and a chevron icon, and wires the anchor reference used to position the popover.

Property	Type	Description
Sm	bool	Renders the smaller 32px variant. Default: `false` (40px).
ClassName	string?	Extra CSS classes appended to the `<button>` element.
ChildContent	RenderFragment?	Trigger content — normally a single `SelectValue`.
AdditionalAttributes	Dictionary<string, object>?	Captured unmatched attributes, forwarded to the `<button>` element.

SelectValue

Displays the label of the current Select.Value, or the Placeholder when nothing is selected. Always placed inside a SelectTrigger.

Property	Type	Required	Description
Placeholder	string?		Text shown when no value is selected. Default: `null`.

SelectContent

Dropdown menu that renders through the shared Popovers host. Hosts SelectGroup, SelectItem, SelectSeparator, etc.

Property	Type	Required	Description
ClassName	string?		Extra CSS classes appended to the listbox container.
ChildContent	RenderFragment?		Menu content — `SelectItem`s, `SelectGroup`s, and optional `SelectSeparator`s.

SelectGroup

Logical grouping of items inside SelectContent. Usually accompanied by a SelectLabel as its first child.

Property	Type	Required	Description
Disabled	bool		When true, all items in the group are disabled (unioned with each item's own `Disabled`). Default: `false`.
ChildContent	RenderFragment?		Typically one `SelectLabel` followed by one or more `SelectItem`s.

SelectLabel

Small uppercase heading rendered at the top of a SelectGroup.

Property	Type	Required	Description
ClassName	string?		Extra CSS classes appended to the label container.
ChildContent	RenderFragment?		Label text.

SelectItem

A single option. Renders its Label (falling back to ChildContent, then Value) plus a check icon when selected.

Property	Type	Description
Value	string?	The value this item reports back to the parent `Select` when chosen.
Label	string?	Display label. When set, also cached so the trigger keeps displaying the correct label after the popover closes.
Disabled	bool	When true, this item cannot be selected. Default: `false`.
ClassName	string?	Extra CSS classes appended to the item container.
ChildContent	RenderFragment?	Custom label markup. Used when `Label` is not supplied.

SelectSeparator

Thin horizontal divider between groups or items inside SelectContent.

Property	Type	Required	Description
ClassName	string?		Extra CSS classes appended to the separator.

SelectScrollUpButton

Decorative chevron-up indicator rendered above a long item list. Currently cosmetic — no auto-scroll behaviour wired.

Property	Type	Required	Description
ClassName	string?		Extra CSS classes appended to the button container.

SelectScrollDownButton

Decorative chevron-down indicator rendered below a long item list. Currently cosmetic — no auto-scroll behaviour wired.

Property	Type	Required	Description
ClassName	string?		Extra CSS classes appended to the button container.