sufi-blazor/docs/components/forms/SbMultiSelect.md

SbMultiSelect

A dropdown component for selecting multiple values from a list. Selected items are displayed as removable chips.

Parameters

Parameter	Type	Default	Description
Values	IReadOnlyList<TValue>?	null	Selected values (two-way bindable)
ValuesChanged	EventCallback<IReadOnlyList<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)
SearchPlaceholder	string?	null	Placeholder for search input (when null, uses localized default)
NoResultsText	string?	null	Text when search returns no results (when null, uses localized default)
RemoveAriaLabel	string?	null	Aria label for chip remove button (when null, uses localized default)
Searchable	bool	false	Whether the select is searchable
MaxSelected	int?	null	Maximum number of selections (optional cap)
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
Style	string?	null	Inline styles

Events

Event	Type	Description
ValuesChanged	EventCallback<IReadOnlyList<TValue>>	Fired when the selection changes

Templates / Slots (RenderFragments)

Slot	Type	Description
ItemTemplate	RenderFragment<TItem>	Custom template for dropdown items
ChipTemplate	RenderFragment<TItem>	Custom template for selected chips
NoResultsTemplate	RenderFragment	Template shown when search returns no results

Template Usage Examples

Custom ItemTemplate

<SbMultiSelect TItem="Tag" TValue="int"
               Items="@tags"
               @bind-Values="selectedTagIds"
               TextField="t => t.Name"
               ValueField="t => t.Id"
               Label="Tags">
    <ItemTemplate Context="tag">
        <SbStack Direction="SbStackDirection.Row" Gap="2" Align="SbAlign.Center">
            <span class="tag-color" style="background: @tag.Color"></span>
            <span>@tag.Name</span>
        </SbStack>
    </ItemTemplate>
</SbMultiSelect>

NoResultsTemplate

<SbMultiSelect TItem="User" TValue="Guid"
               Items="@users"
               @bind-Values="selectedUserIds"
               Searchable="true">
    <NoResultsTemplate>
        <SbEmptyState>
            <SbText>No users match your search</SbText>
        </SbEmptyState>
    </NoResultsTemplate>
</SbMultiSelect>

CSS Classes

• sb-select-anchor - Shared anchor container
• sb-multi-select-anchor - Multi-select wrapper (used with sb-select-anchor)
• sb-multi-select__label - Label element
• sb-multi-select__required - Required asterisk
• sb-multi-select-trigger - Trigger container
• sb-multi-select__chip - Selected item chip
• sb-multi-select__chip-remove - Chip remove button
• sb-multi-select__placeholder - Placeholder text
• sb-multi-select--disabled - Disabled state
• sb-select-dropdown - Dropdown panel
• sb-select-dropdown--flip-up - Dropdown flips upward
• sb-select-search - Search input container
• sb-select-options - Options container
• sb-select-option - Individual option
• sb-select-option--selected - Selected option
• sb-select-empty - Empty state

Accessibility

• Uses role="listbox" with aria-multiselectable="true"
• role="option" for each item
• aria-selected indicates selection state
• Chip remove buttons have aria-labels
• Keyboard: Enter/Space to toggle selection, Escape to close

Examples

Basic Usage

<SbMultiSelect TItem="string" TValue="string"
               Items="@options"
               @bind-Values="selectedOptions"
               Label="Select options" />

With Objects

<SbMultiSelect TItem="Category" TValue="int"
               Items="@categories"
               @bind-Values="selectedCategoryIds"
               TextField="c => c.Name"
               ValueField="c => c.Id"
               Label="Categories" />

Searchable with Limit

<SbMultiSelect TItem="User" TValue="Guid"
               Items="@users"
               @bind-Values="assignedUserIds"
               TextField="u => u.DisplayName"
               ValueField="u => u.Id"
               Searchable="true"
               MaxSelected="5"
               Label="Assign to (max 5)" />

Required Field

<SbMultiSelect TItem="Skill" TValue="int"
               Items="@skills"
               @bind-Values="requiredSkillIds"
               TextField="s => s.Name"
               ValueField="s => s.Id"
               Label="Required Skills"
               Required="true" />

Disabled State

<SbMultiSelect TItem="string" TValue="string"
               Items="@options"
               Values="@lockedValues"
               Disabled="true"
               Label="Locked Selection" />