The Ignite UI for Web Components 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.
<!DOCTYPE html><html><head><title>Select Overview</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v6.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-select><igc-select-itemvalue="Orange">Orange</igc-select-item><igc-select-itemvalue="Apple">Apple</igc-select-item><igc-select-itemvalue="Banana">Banana</igc-select-item><igc-select-itemvalue="Mango">Mango</igc-select-item></igc-select></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.
Usage
First, you need to install the Ignite UI for Web Components by running the following command:
npm install igniteui-webcomponents
cmd
Before using the IgcSelectComponent component, you need to register it together with its additional components:
The IgcSelectComponent 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 IgcSelectItemComponent component allows the users to declaratively specify a list of options to be used by the IgcSelectComponent control. Each item provides a value property that represents the data it carries upon selection. The IgcSelectItemComponent 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 IgcSelectItemComponent. You could also provide custom content to be rendered before or after the IgcSelectItemComponent 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.
<!DOCTYPE html><html><head><title>Select Item</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v6.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-select><igc-select-item><igc-iconslot="prefix"name="hotel"collection="material"></igc-icon>
Hotel
</igc-select-item><igc-select-itemdisabled><igc-iconslot="prefix"name="grocery"collection="material"></igc-icon>
Grocery
</igc-select-item><igc-select-itemselected><igc-iconslot="prefix"name="restaurant"collection="material"></igc-icon>
Restaurant
</igc-select-item></igc-select></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
<!DOCTYPE html><html><head><title>Select Header</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v6.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-select><igc-select-header>Tasks</igc-select-header><igc-select-itemvalue="spec"selected>Specification</igc-select-item><igc-select-itemvalue="implement">Implementation</igc-select-item><igc-select-itemvalue="test"disabled>Testing</igc-select-item><igc-select-itemvalue="docs">Documentation</igc-select-item></igc-select></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
<!DOCTYPE html><html><head><title>Select Group</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v6.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-select><igc-select-group><spanslot="label">Europe</span><igc-select-item><igc-iconslot="prefix"name="place"collection="material"></igc-icon>
Germany
<spanslot="suffix">DE</span></igc-select-item><igc-select-item><igc-iconslot="prefix"name="place"collection="material"></igc-icon>
France
<spanslot="suffix">FR</span></igc-select-item><igc-select-item><igc-iconslot="prefix"name="place"collection="material"></igc-icon>
Spain
<spanslot="suffix">ES</span></igc-select-item></igc-select-group><igc-select-groupdisabled><spanslot="label">Asia</span><igc-select-item><igc-iconslot="prefix"name="place"collection="material"></igc-icon>
China
<spanslot="suffix">CN</span></igc-select-item><igc-select-item><igc-iconslot="prefix"name="place"collection="material"></igc-icon>
Japan
<spanslot="suffix">JP</span></igc-select-item><igc-select-item><igc-iconslot="prefix"name="place"collection="material"></igc-icon>
India
<spanslot="suffix">IN</span></igc-select-item><igc-select-item><igc-iconslot="prefix"name="place"collection="material"></igc-icon>
Thailand
<spanslot="suffix">TH</span></igc-select-item></igc-select-group><igc-select-group><spanslot="label">North America</span><igc-select-item><igc-iconslot="prefix"name="place"collection="material"></igc-icon>
USA
<spanslot="suffix">US</span></igc-select-item><igc-select-item><igc-iconslot="prefix"name="place"collection="material"></igc-icon>
Canada
<spanslot="suffix">CA</span></igc-select-item><igc-select-item><igc-iconslot="prefix"name="place"collection="material"></igc-icon>
Mexico
<spanslot="suffix">MX</span></igc-select-item></igc-select-group></igc-select></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css
<igc-select><igc-select-group><spanslot="label">Europe</span><igc-select-item><igc-icon @ref="IconRef"slot="prefix"name="place"collection="material"></igc-icon>
Germany
<spanslot="suffix">DE</span></igc-select-item><igc-select-item><igc-iconslot="prefix"name="place"collection="material"></igc-icon>
France
<spanslot="suffix">FR</span></igc-select-item><igc-select-item><igc-iconslot="prefix"name="place"collection="material"></igc-icon>
Spain
<spanslot="suffix">ES</span></igc-select-item></igc-select-group></igc-select>html
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 IgcTabComponent 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.
The IgcSelectComponent component supports only single selection of items.
Styling
You can change the appearance of the Ignite UI for Web Components IgcSelectComponent 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.
<!DOCTYPE html><html><head><title>Select Styling</title><metacharset="UTF-8" /><linkrel="shortcut icon"href="https://static.infragistics.com/xplatform/images/browsers/wc.png" ><linkrel="stylesheet"href="https://fonts.googleapis.com/icon?family=Material+Icons" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Kanit&display=swap" /><linkrel="stylesheet"href="https://fonts.googleapis.com/css?family=Titillium Web" /><linkrel="stylesheet"href="https://static.infragistics.com/xplatform/css/samples/shared.v6.css"type="text/css" /></head><body><divid="root"><divclass="container sample center"><igc-selectlabel="Destinations:"><igc-iconslot="prefix"name="place"collection="material"></igc-icon><spanslot="helper-text">Choose the desired place</span><igc-select-groupdisabled><spanslot="label">Europe</span><igc-select-item><igc-iconslot="prefix"name="place"collection="material"></igc-icon>
Germany
<spanslot="suffix">DE</span></igc-select-item><igc-select-item><igc-iconslot="prefix"name="place"collection="material"></igc-icon>
France
<spanslot="suffix">FR</span></igc-select-item><igc-select-itemselected><igc-iconslot="prefix"name="place"collection="material"></igc-icon>
Spain
<spanslot="suffix">ES</span></igc-select-item></igc-select-group><igc-select-group><spanslot="label">North America</span><igc-select-item><igc-iconslot="prefix"name="place"collection="material"></igc-icon>
USA
<spanslot="suffix">US</span></igc-select-item><igc-select-item><igc-iconslot="prefix"name="place"collection="material"></igc-icon>
Canada
<spanslot="suffix">CA</span></igc-select-item><igc-select-item><igc-iconslot="prefix"name="place"collection="material"></igc-icon>
Mexico
<spanslot="suffix">MX</span></igc-select-item></igc-select-group></igc-select></div></div><!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><scriptsrc="src/index.ts"></script><% } %>
</body></html>html
/* shared styles are loaded from: *//* https://static.infragistics.com/xplatform/css/samples */css