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 Select and the IgrSelectItem and its necessary CSS, like so:

import { IgrSelect, IgrSelectItem } from 'igniteui-react';
import 'igniteui-webcomponents/themes/light/bootstrap.css';

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. When slotting content, we recommend using a <span> element for simple text, symbols, or emojis, and an <igc-icon> component for icons.

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 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 that allows you to specify the text content of the item. This text content will be used as the value when 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. As with the IgrSelect component, we recommend using a <span> element when adding simple text, symbols, or emojis, and an <igc-icon> component when adding icons to the prefix and suffix slots.

You can predefine a selected item by setting the Selected property. You can 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 IgrSelectItems 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. We recommend using a <span> element for the label slot.

<IgrSelect>
  <IgrSelectGroup>
    <span slot="label">Europe</span>
    <IgrSelectItem>
      <span slot="prefix">
        <IgrIcon name="place" collection="material"></IgrIcon>
      </span>
      <span> Germany </span>
      <span slot="suffix">DE</span>
    </IgrSelectItem>
    <IgrSelectItem>
      <span slot="prefix">
        <IgrIcon name="place" collection="material"></IgrIcon>
      </span>
      <span> France </span>
      <span slot="suffix">FR</span>
    </IgrSelectItem>
    <IgrSelectItem>
      <span slot="prefix">
        <IgrIcon name="place" 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 or IgrTab 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.

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

Select Item Component

Select Group Component

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);
}

API References

Additional Resources

• Ignite UI for React Forums
• Ignite UI for React GitHub