React Select
The Ignite UI for React 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.
React Select Example
Usage
First, you need to the install the corresponding Ignite UI for React npm package by running the following command:
npm install igniteui-react
You will then need to import the IgrSelect
and the IgrSelectItem
, its necessary CSS, and register its module, like so:
import { IgrSelectModule, IgrSelect, IgrSelectItemModule, IgrSelectItem } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
IgrSelectModule.register();
IgrSelectItemModule.register();
[!Note] Please note that the select header and group components are not mandatory unless you want to use them.
To start using the component add the IgrSelect
along with a list of IgrSelectItem
's to choose from:
<IgrSelect>
<IgrSelectItem value="Orange"><span>Orange</span></IgrSelectItem>
<IgrSelectItem value="Apple"><span>Apple</span></IgrSelectItem>
<IgrSelectItem value="Banana"><span>Banana</span></IgrSelectItem>
<IgrSelectItem value="Mango"><span>Mango</span></IgrSelectItem>
</IgrSelect>
Select
The IgrSelect
component can be used inside a Form
component, thus it exposes a name
property to be registered with. It also has a label
, and 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 header
, footer
, helper-text
, prefix
, suffix
, and toggle-icon
. The component size can be changed using the --ig-size
CSS variable.
Item
The IgrSelectItem
component allows the users to declaratively specify a list of options to be used by the IgrSelect
control. Each item provides a value
property that represents the data it carries upon selection. The IgrSelectItem
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 IgrSelectItem
. You could also provide custom content to be rendered before or after the IgrSelectItem
content using the prefix
and suffix
slots. You could predefine a selected item by setting the Selected
property. You could also disable some or all items via the disabled
property.
Header
You can use the IgrSelectHeader
to provide a header for a group of items.
<IgrSelect>
<IgrSelectHeader>
<span>Tasks</span>
</IgrSelectHeader>
</IgrSelect>
Group
Multiple IgrSelectItem
s can be placed between the opening and closing brackets of an IgrSelectGroup
component so that users can visually group them together. The IgrSelectGroup
can be labelled via its label
slot and disabled via its disabled
property.
[!Note] Keep in mind that if a select group is disabled, you cannot enable separate items of it.
<IgrSelect>
<IgrSelectGroup>
<span slot="label">Europe</span>
<IgrSelectItem>
<span slot="prefix">
<IgrIcon name="place" ref={iconPlace} collection="material"></IgrIcon>
</span>
<span> Germany </span>
<span slot="suffix">DE</span>
</IgrSelectItem>
<IgrSelectItem>
<span slot="prefix">
<IgrIcon name="place" ref={iconPlace} collection="material"></IgrIcon>
</span>
<span> France </span>
<span slot="suffix">FR</span>
</IgrSelectItem>
<IgrSelectItem>
<span slot="prefix">
<IgrIcon name="place" ref={iconPlace} collection="material"></IgrIcon>
</span>
<span> Spain </span>
<span slot="suffix">ES</span>
</IgrSelectItem>
</IgrSelectGroup>
</IgrSelect>
Validation
In addition, the IgrSelect
supports most of the IgrInput
properties, such as required
, disabled
, autofocus
, etc. The component also exposes a method bound to its validation:
reportValidity
- checks for validity and focuses the component if invalid.
Keyboard Navigation
When the select is focused and the list of options is not visible:
- Open the
select
using the ALT + ↑ ↓ combination or by clicking on the Space or the Enter key. - Close the
select
using the ALT + ↑ or ↓ combination or any of the Enter, Space, Esc orIgrTab
keys. - 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.
[!Note] The
IgrSelect
component supports only single selection of items.
Styling
You can change the appearance of the Ignite UI for React IgrSelect
component and its items, by using the exposed CSS parts listed below:
Select Component
Part name | Description |
---|---|
input |
The encapsulated igc-input. |
label |
The encapsulated text label. |
list |
A wrapper that holds the list of options. |
prefix |
A prefix wrapper that renders content before the input. |
suffix |
A suffix wrapper that renders content after the input. |
toggle-icon |
A toggle-icon wrapper that renders content inside the suffix wrapper. |
helper-text |
A helper-text wrapper that renders content below the input. |
Select Item Component
Part name | Description |
---|---|
content |
The main wrapper that holds the text content of an item. |
prefix |
A prefix wrapper that renders content before the main wrapper. |
suffix |
A suffix wrapper that renders content after the main wrapper. |
Select Group Component
Part name | Description |
---|---|
label |
A label wrapper that renders content above the select group items. |
igc-select::part(base) {
background: var(--ig-primary-50);
}
igc-select-item[active] {
background: var(--ig-secondary-300);
}
igc-select::part(input) {
background-color: var(--ig-primary-50);
}
igc-select::part(prefix),
igc-select::part(suffix) {
color: var(--ig-secondary-500-contrast);
background: var(--ig-secondary-500);
}