Select
Select
Component demo
Interactive example
<ic-selectplaceholder="Select an option..."label="What is your favourite coffee?"></ic-select><IcSelectplaceholder="Select an option..."label="What is your favourite coffee?"options={options}onIcChange={(event)=>console.log(event.detail.value)}/>Select details
Props
All components also accept native properties supported by the DOM, such asclassName
and
style
.
|
|
|
|
|---|---|---|
|
|
The label for the select. |
|
|
|
The amount of time, in milliseconds, to wait to trigger the |
|
|
|
If |
|
|
|
If |
|
|
|
The text displayed when there are no options in the option list. |
|
|
|
The <form> element to associate the select with. |
|
|
|
If |
|
|
|
The helper text that will be displayed for additional field guidance. |
|
|
|
If |
|
|
|
If |
|
|
|
If |
|
|
|
If |
|
|
|
The message displayed when external loading times out. |
|
|
|
The message displayed whilst the options are being loaded externally. |
|
|
|
If |
|
|
|
The name of the control, which is submitted with the form data. |
|
|
|
The possible selection options. |
|
|
|
The placeholder value to be displayed. |
|
|
|
If |
|
|
|
If |
|
|
|
Whether the search string of the searchable select should match the start of or anywhere in the options. Only applies to built in filtering. |
|
|
|
If |
|
|
|
If |
|
|
|
If |
|
|
|
The size of the select. |
|
|
|
If using external filtering, set a timeout for when loading takes too long. |
|
|
|
The validation status - e.g. 'error' | 'warning' | 'success'. |
|
|
|
The text to display as the validation message. |
|
|
|
The value of the select, reflected by the value of the currently selected option. For the searchable variant, the value is also reflected by the user input. For the multi-select variant, the value must be an array of option values. |
|
|
The label for the select. |
|
The amount of time, in milliseconds, to wait to trigger the |
|
If |
|
If |
|
The text displayed when there are no options in the option list. |
|
The <form> element to associate the select with. |
|
If |
|
The helper text that will be displayed for additional field guidance. |
|
If |
|
If |
|
If |
|
If |
|
The message displayed when external loading times out. |
|
The message displayed whilst the options are being loaded externally. |
|
If |
|
The name of the control, which is submitted with the form data. |
|
The possible selection options. |
|
The placeholder value to be displayed. |
|
If |
|
If |
|
Whether the search string of the searchable select should match the start of or anywhere in the options. Only applies to built in filtering. |
|
If |
|
If |
|
If |
|
The size of the select. |
|
If using external filtering, set a timeout for when loading takes too long. |
|
The validation status - e.g. 'error' | 'warning' | 'success'. |
|
The text to display as the validation message. |
|
The value of the select, reflected by the value of the currently selected option. For the searchable variant, the value is also reflected by the user input. For the multi-select variant, the value must be an array of option values. |
Slots
A slot allows for any type of element or markup to be passed into and rendered within a web component. This creates more flexibility than using a prop which must take a specific type of data.
Content can be slotted into a component by adding it as a top-level child of the component.
Slots can have a name to identify them. These specify which slot the content will be inserted into, and therefore where it will be rendered and how it will be used within the component. The name of the slot to be used can be specified by passing it via a
slot
attribute on the slotted content.
|
|
|
|---|---|
|
|
|
|
|
CSS Custom Properties
|
|
|
|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Events
All components also accept native events supported by the DOM, such as
onClick
and
onKeyDown
.
|
|
|
|
|---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Methods
|
|
|
|
|---|---|---|
|
|
|
|
|
|
Variants
With clear button, descriptions, helper text and custom placeholder
Interactive example
<ic-selectlabel="What is your favourite coffee?"placeholder="Select an option..."helper-text="Select one option from the list"show-clear-button="true"searchable="true"></ic-select><IcSelectlabel="What is your favourite coffee?"options={options}placeholder="Select an option…"helperText="Select one option from the list"showClearButtonsearchableonIcChange={(event)=>console.log(event.detail.value)}/>Disabled
Interactive example
<ic-selectplaceholder="Select an option…"label="What is your favourite coffee?"disabled="true"></ic-select><IcSelectplaceholder="Select an option…"label="What is your favourite coffee?"options={options}disabledonIcChange={(event)=>console.log(event.detail.value)}/>Options disabled
Interactive example
<ic-selectplaceholder="Select an option…"label="What is your favourite coffee?"></ic-select><IcSelectplaceholder="Select an option…"label="What is your favourite coffee?"options={options}onIcChange={(event)=>console.log(event.detail.value)}/>With icon
Interactive example
<ic-selectlabel="What is your favourite coffee?"><svgslot="icon"xmlns="http://www.w3.org/2000/svg"height="24"viewBox="0 0 24 24"width="24"fill="#000000"><pathd="M2,21H20V19H2M20,8H18V5H20M20,3H4V13A4,4 0 0,0 8,17H14A4,4 0 0,0 18,13V10H20A2,2 0 0,0 22,8V5C22,3.89 21.1,3 20,3Z"/></svg></ic-select><IcSelectlabel="What is your favourite coffee?"options={options}onIcChange={(event)=>console.log(event.detail.value)}><SlottedSVGslot="icon"xmlns="http://www.w3.org/2000/svg"height="24"viewBox="0 0 24 24"width="24"fill="#000000"><pathd="M2,21H20V19H2M20,8H18V5H20M20,3H4V13A4,4 0 0,0 8,17H14A4,4 0 0,0 18,13V10H20A2,2 0 0,0 22,8V5C22,3.89 21.1,3 20,3Z"/></SlottedSVG></IcSelect>Sizes
Interactive example
<ic-selectid="select-default-small"label="What is your favourite coffee?"size="small"></ic-select><ic-selectid="select-default"label="What is your favourite coffee?"></ic-select><ic-selectid="select-default-large"label="What is your favourite coffee?"size="large"></ic-select><IcSelectlabel="What is your favourite coffee?"options={options}onIcChange={(event)=>console.log(event.detail.value)}size="small"/><IcSelectlabel="What is your favourite coffee?"options={options}onIcChange={(event)=>console.log(event.detail.value)}/><IcSelectlabel="What is your favourite coffee?"options={options}onIcChange={(event)=>console.log(event.detail.value)}size="large"/>Required
Interactive example
<ic-selectlabel="What is your favourite coffee?"required="true"></ic-select><IcSelectlabel="What is your favourite coffee?"options={options}required/>Hidden label
Interactive example
<ic-selectplaceholder="Select an option…"label="What is your favourite coffee?"hide-label="true"></ic-select><IcSelectplaceholder="Select an option…"label="What is your favourite coffee?"options={options}hideLabelonIcChange={(event)=>console.log(event.detail.value)}/>Groups
Interactive example
<ic-selectplaceholder="Select an option…"label="What is your favourite coffee?"></ic-select><IcSelectplaceholder="Select an option…"label="What is your favourite coffee?"options={options}onIcChange={(event)=>console.log(event.detail.value)}/>Recommended
Interactive example
<ic-selectplaceholder="Select an option…"label="What is your favourite coffee?"></ic-select><IcSelectplaceholder="Select an option…"label="What is your favourite coffee?"options={options}onIcChange={(event)=>console.log(event.detail.value)}/>Validation
Interactive example
<ic-selectplaceholder="Select an option…"label="What is your favourite coffee?"validation-status="success"validation-text="Coffee available"value="americano"id="1"></ic-select><ic-selectplaceholder="Select an option…"label="What is your favourite coffee?"validation-status="warning"validation-text="Only a few left"value="cappuccino"id="2"></ic-select><ic-selectplaceholder="Select an option…"label="What is your favourite coffee?"validation-status="error"validation-text="Coffee unavailable"value="mocha"id="3"></ic-select><IcSelectplaceholder="Select an option…"label="What is your favourite coffee?"value="americano"options={options}validationStatus="success"validationText="Coffee available"onIcChange={(event)=>console.log(event.detail.value)}/><IcSelectplaceholder="Select an option…"label="What is your favourite coffee?"value="cappuccino"options={options}validationStatus="warning"validationText="Only a few left"onIcChange={(event)=>console.log(event.detail.value)}/><IcSelectplaceholder="Select an option…"label="What is your favourite coffee?"value="mocha"options={options}validationStatus="error"validationText="Coffee unavailable"onIcChange={(event)=>console.log(event.detail.value)}/>Custom elements in options
Interactive example
<ic-selectplaceholder="Select an option..."label="What is your favourite coffee?"></ic-select><IcSelectplaceholder="Select an option..."label="What is your favourite coffee?"options={options}onIcChange={(event)=>console.log(event.detail.value)}/>Searchable
Interactive example
<ic-selectplaceholder="Select an option…"label="What is your favourite coffee?"searchable="true"></ic-select><IcSelectplaceholder="Select an option…"label="What is your favourite coffee?"options={options}searchableonIcChange={(event)=>console.log(event.detail.value)}/>Searchable – with descriptions included in search
Interactive example
<ic-selectplaceholder="Select an option…"label="What is your favourite coffee?"searchable="true"include-description-in-search="true"></ic-select><IcSelectplaceholder="Select an option…"label="What is your favourite coffee?"options={options}searchableincludeDescriptionsInSearchonIcChange={(event)=>console.log(event.detail.value)}/>Searchable – with group titles included in search
Interactive example
<ic-selectplaceholder="Select an option…"label="What is your favourite coffee?"searchable="true"include-group-titles-in-search="true"></ic-select><IcSelectplaceholder="Select an option…"label="What is your favourite coffee?"options={options}searchableincludeGroupTitlesInSearchonIcChange={(event)=>console.log(event.detail.value)}/>Multi-select
Interactive example
<ic-selectid="select-default"label="What are your favourite types of coffee?"multiple="true"></ic-select><IcSelectlabel="What are your favourite types of coffee?"value={["Ame","Fil","Moc"]}options={options}onIcChange={(event)=>console.log(event.detail.value)}onIcOptionSelect={(event)=>console.log(event.detail.value)}onIcOptionDeselect={(event)=>console.log(event.detail.value)}multiple/>Multi-select – Read-only
Make the multi-select read-only by using thereadonly
prop.
Use thevalue
prop to set which options are selected and will be displayed when it is read-only.
Interactive example
<ic-selectid="select-default"label="What are your favourite types of coffee?"multiple="true"readonly="true"></ic-select><IcSelectvalue={["Cap","Fla","Moc"]}label="What are your favourite types of coffee?"options={options}multiplereadonly/>Multi-select – Groups
Display options in groups by passing an array of child options to thechildren
property of a parent option.
The parent option will be rendered as the title of the group.
Interactive example
<ic-selectid="select-default"label="What are your favourite types of coffee?"multiple="true"></ic-select><IcSelectlabel="What are your favourite types of coffee?"options={options}multiple/>Multi-select – Disabled options
Disable certain options by setting thedisabled
property totrue
for each option.
Interactive example
<ic-selectid="select-default"label="What are your favourite types of coffee?"multiple="true"></ic-select><IcSelectlabel="What are your favourite types of coffee?"options={options}onIcChange={(event)=>console.log(event.detail.value)}onIcOptionSelect={(event)=>console.log(event.detail.value)}onIcOptionDeselect={(event)=>console.log(event.detail.value)}multiple/>Custom filtering example
This example shows how to filter data asynchronously when the value in the select field changes. The data is mocked and displayed after a one second delay, but could be replaced with a call to an API or database.
Interactive example
<ic-selectplaceholder="Select an option…"label="What is your favourite coffee?"searchable="true"debounce="300"disable-auto-filtering="true"id="external-filter-select"characters-until-suggestions="2"></ic-select><IcSelectplaceholder="Select an option…"label="What is your favourite coffee?"debounce={300}searchabledisableAutoFilteringoptions={results}onIcOptionSelect={(event)=>setSelectedValue(event.detail.value)}onIcClear={()=>setResults([])}onIcChange={changeHandler}/>