Multi Select

A basic MultiSelect using Options mode (data-driven). Provide an IEnumerable<SelectOption<TValue>> to the Options parameter and use @bind-Values for two-way binding of the selected values.

Use MultiSelectItem children for full control over each item's rendering. Each item requires a Value and Text (used for search filtering and badge display). Custom content can be provided via ChildContent.

Initialize the bound collection with default items to have them pre-selected on first render. The selected items are displayed as tags in the trigger area. A live count below the component confirms the current selection.

Use MaxDisplayTags to limit the number of visible tags in the trigger area. When the selection exceeds this limit, a "+N more" badge is shown. This prevents the trigger from growing too tall when many items are selected.

Set SingleLine to true to keep the trigger a single fixed-height row. Tags that don't fit are clipped, while the "+N more" indicator and chevron stay pinned and visible. By default the trigger grows and tags wrap onto additional rows, which can shift surrounding layout in dense forms or toolbars.

Set Disabled to true to prevent user interaction. The trigger button becomes non-clickable with reduced opacity and a pointer-events-none style. This is useful for read-only states or when a prerequisite condition must be met first.

A real-world task assignment form combining MultiSelect with Input components inside a Card. This demonstrates how multi-select integrates into complete form layouts for scenarios like project management or issue tracking.

Use OnLoadMore, IsLoading, and EndOfListMessage to load large option sets in batches as the user scrolls the dropdown. This example uses Options mode with a country list.

Compositional mode with rich items showing country flag emojis. OnLoadMore on the root BbMultiSelect triggers loading when the user scrolls near the bottom.