SbSelect

A dropdown select component for choosing a single value from a list of items. Supports search filtering, custom item templates, and keyboard navigation.

Two variants: SbSelect (data-driven: bind to Items with TextField/ValueField) and SbSimpleSelect (declarative: use SbSelectOption children). For clearable selection (clear button), use SbSimpleSelect with Clearable="true".

Parameters

Parameter	Type	Default	Description
Value	TValue?	null	The selected value (two-way bindable)
ValueChanged	EventCallback<TValue?>	-	Callback when selection changes
Items	IEnumerable<TItem>?	null	Items to select from
TextField	Func<TItem, string>	item => item.ToString()	Function to get display text from item
ValueField	Func<TItem, TValue>	item => (TValue)item	Function to get value from item
Placeholder	string?	null	Placeholder when no selection (when null, uses localized default)
Searchable	bool	false	Whether the select is searchable
Clearable	bool	false	Reserved; for clearable UI use SbSimpleSelect with Clearable="true"
Disabled	bool	false	Whether the select is disabled
Id	string?	null	Element ID for form association
Label	string?	null	Label text displayed above the select
Required	bool	false	Whether the field is required
Class	string?	null	Additional CSS classes

Events

Event	Type	Description
ValueChanged	EventCallback<TValue?>	Fired when the selection changes

Templates / Slots (RenderFragments)

Slot	Type	Description
ItemTemplate	RenderFragment<TItem>	Custom template for rendering each item in the dropdown
NoResultsTemplate	RenderFragment	Template shown when search returns no results

Template Usage Examples

Custom ItemTemplate

<SbSelect TItem="Country" TValue="string"
          Items="@countries"
          @bind-Value="selectedCountryCode"
          TextField="c => c.Name"
          ValueField="c => c.Code"
          Label="Country">
    <ItemTemplate Context="country">
        <div class="country-item">
            <img src="@country.FlagUrl" alt="" class="flag-icon" />
            <span>@country.Name</span>
        </div>
    </ItemTemplate>
</SbSelect>

NoResultsTemplate

<SbSelect TItem="User" TValue="int"
          Items="@users"
          @bind-Value="selectedUserId"
          TextField="u => u.Name"
          ValueField="u => u.Id"
          Searchable="true">
    <NoResultsTemplate>
        <div class="no-results">
            <SbIcon Name="search-off" />
            <span>No users found</span>
        </div>
    </NoResultsTemplate>
</SbSelect>

CSS Classes

sb-select-anchor - Anchor container for dropdown positioning
sb-select__label - Label element
sb-select__required - Required asterisk
sb-select-trigger - Button that opens the dropdown
sb-select-trigger__value - Selected value display
sb-select-trigger__placeholder - Placeholder text
sb-select-trigger__icon - Chevron icon
sb-select-trigger__icon--open - Icon rotation when open
sb-select-dropdown - Dropdown panel
sb-select-dropdown--flip-up - Dropdown flips upward
sb-select-search - Search input container
sb-select-search__input - Search input element
sb-select-options - Options container
sb-select-option - Individual option
sb-select-option--selected - Selected option state
sb-select-empty - Empty/no results state

Accessibility

Uses role="listbox" for the dropdown
role="option" for each item
aria-selected indicates current selection
aria-haspopup="listbox" on trigger
aria-expanded indicates dropdown state
Keyboard navigation: Enter/Space to open, Escape to close, Arrow keys to navigate

Examples

Basic Usage

<SbSelect TItem="string" TValue="string"
          Items="@options"
          @bind-Value="selectedOption"
          Label="Choose an option" />

With Objects

<SbSelect TItem="Product" TValue="int"
          Items="@products"
          @bind-Value="selectedProductId"
          TextField="p => p.Name"
          ValueField="p => p.Id"
          Label="Product"
          Placeholder="Select a product..." />

Searchable Select

<SbSelect TItem="User" TValue="Guid"
          Items="@users"
          @bind-Value="selectedUserId"
          TextField="u => $"{u.FirstName} {u.LastName}"
          ValueField="u => u.Id"
          Searchable="true"
          Label="Assign to" />

With Custom Template

<SbSelect TItem="Priority" TValue="int"
          Items="@priorities"
          @bind-Value="priority"
          TextField="p => p.Name"
          ValueField="p => p.Level"
          Label="Priority">
    <ItemTemplate Context="p">
        <SbStack Direction="SbStackDirection.Row" Gap="2" Align="SbAlign.Center">
            <span class="priority-dot" style="background: @p.Color"></span>
            <span>@p.Name</span>
        </SbStack>
    </ItemTemplate>
</SbSelect>

Disabled Select

<SbSelect TItem="string" TValue="string"
          Items="@options"
          Value="@defaultValue"
          Disabled="true"
          Label="Status (locked)" />

5.5 KiB Raw Blame History Unescape Escape