The Ignite UI for Blazor Select component allows a single selection from a list of items, placed in a dropdown. This form control offers a quick items list navigation, including selection, based on a single or multiple characters match.
Blazor Select Example
Before using the
Select component, you need to register it together with its additional components:
// in Program.cs file builder.Services.AddIgniteUIBlazor(typeof(IgbSelectModule));
You will also need to link an additional CSS file to apply the styling to the
Select component. The following needs to be placed in the wwwroot/index.html file in a Blazor Web Assembly project or the Pages/_Host.cshtml file in a Blazor Server project:
<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
[!Note] Please note that the select header and group components are not mandatory unless you want to use them.
<IgbSelect> <IgbSelectItem Value="orange">Orange</IgbSelectItem> <IgbSelectItem Value="apple">Apple</IgbSelectItem> <IgbSelectItem Value="banana">Banana</IgbSelectItem> <IgbSelectItem Value="mango">Mango</IgbSelectItem> </IgbSelect>
Select component can be used inside a
IgbForm component, thus it exposes a
Name property to be registered with. It also has a
Placeholder properties. The
Outlined property is used for styling purposes only when it comes to the Material theme. Except for the default slot, the component provides a few other slots including
toggle-icon. The component size can be changed using the
--ig-size CSS variable.
IgbSelectItem component allows the users to declaratively specify a list of options to be used by the
Select control. Each item provides a
Value property that represents the data it carries upon selection. The
IgbSelectItem has a default slot which allows you to specify the text content of the item. This text content will be used as value in case the
Value property is not present on the
IgbSelectItem. You could also provide custom content to be rendered before or after the
IgbSelectItem content using the
suffix slots. You could predefine a selected item by setting the
Selected property. You could also disable some or all items via the
You can use the
IgbSelectHeader to provide a header for a group of items.
<IgbSelect> <IgbSelectHeader>Tasks</IgbSelectHeader> </IgbSelect>
IgbSelectItems can be placed between the opening and closing brackets of an
IgbSelectGroup component so that users can visually group them together. The
IgbSelectGroup can be labelled via its
label slot and disabled via its
[!Note] Keep in mind that if a select group is disabled, you cannot enable separate items of it.
<IgbSelect> <IgbSelectGroup> <span slot="label">Europe</span> <IgbSelectItem> <IgbIcon @ref="IconRef" slot="prefix" name="place" collection="material"></IgbIcon> Germany <span slot="suffix">DE</span> </IgbSelectItem> <IgbSelectItem> <IgbIcon slot="prefix" name="place" collection="material"></IgbIcon> France <span slot="suffix">FR</span> </IgbSelectItem> <IgbSelectItem> <IgbIcon slot="prefix" name="place" collection="material"></IgbIcon> Spain <span slot="suffix">ES</span> </IgbSelectItem> </IgbSelectGroup> </IgbSelect>
reportValidity- checks for validity and focuses the component if invalid.
When the select is focused and the list of options is not visible:
- Open the
Selectusing the ALT + ↑ ↓ combination or by clicking on the Space or the Enter key.
- Close the
Selectusing the ALT + ↑ or ↓ combination or any of the Enter, Space, Esc or
- Using the ← → keys will select the previous item in the list.
- Using the ↑ ↓ keys will select the next item in the list.
- Using the Home or End keys will select the first or last item in the list.
- Typing characters will query the list of items and select the one that most closely matches the current user input.
When the select is focused and the list of options is visible:
- Using the Enter or Space keys will select an item and close the list.
- Using the ← → keys will activate the previous item in the list.
- Using the ↑ ↓ keys will activate the next item in the list.
- Using the Home or End keys will activate the first or last item in the list.
Selectcomponent supports only single selection of items.