components-select - EAC design system

Select

Single select

A single-value select field, powered by SlimSelect.

Select your brand

<div class="field field-type-select" data-placeholder="Select your brand">
	<label for="brand-select-demo" class="input__label"><span class="u-sr-accessible">Select your brand</span></label>
	<select class="select" id="brand-select-demo" name="brand-select-demo">
		<option data-placeholder="true"></option>
					<option value="Bosch">Bosch</option>
					<option value="Siemens">Siemens</option>
					<option value="Whirlpool">Whirlpool</option>
					<option value="Samsung">Samsung</option>
					<option value="LG">LG</option>
					<option value="Electrolux">Electrolux</option>
					<option value="Miele">Miele</option>
					<option value="Indesit">Indesit</option>
					<option value="Candy">Candy</option>
					<option value="Beko">Beko</option>
					<option value="Hoover">Hoover</option>
					<option value="AEG">AEG</option>
					<option value="Hotpoint">Hotpoint</option>
					<option value="Zanussi">Zanussi</option>
					<option value="Haier">Haier</option>
					<option value="Hisense">Hisense</option>
					<option value="Ariston">Ariston</option>
					<option value="Brandt">Brandt</option>
					<option value="Daewoo">Daewoo</option>
					<option value="Smeg">Smeg</option>
			</select>
</div>

Multiple select

A multi-value select field, allowing several options to be selected at once.

Select one or more brands

<div class="field field-type-select" data-placeholder="Select one or more brands">
	<label for="brand-select-multiple-demo" class="input__label"><span class="u-sr-accessible">Select one or more brands</span></label>
	<select class="select" id="brand-select-multiple-demo" name="brand-select-multiple-demo" multiple>
		<option data-placeholder="true"></option>
					<option value="Bosch">Bosch</option>
					<option value="Siemens">Siemens</option>
					<option value="Whirlpool">Whirlpool</option>
					<option value="Samsung">Samsung</option>
					<option value="LG">LG</option>
					<option value="Electrolux">Electrolux</option>
					<option value="Miele">Miele</option>
					<option value="Indesit">Indesit</option>
					<option value="Candy">Candy</option>
					<option value="Beko">Beko</option>
					<option value="Hoover">Hoover</option>
					<option value="AEG">AEG</option>
					<option value="Hotpoint">Hotpoint</option>
					<option value="Zanussi">Zanussi</option>
					<option value="Haier">Haier</option>
					<option value="Hisense">Hisense</option>
					<option value="Ariston">Ariston</option>
					<option value="Brandt">Brandt</option>
					<option value="Daewoo">Daewoo</option>
					<option value="Smeg">Smeg</option>
			</select>
</div>

Select without search

A select field with the search input inside the dropdown disabled (single-value or multi-value).

Select your brand

<div class="field field-type-select" data-placeholder="Select your brand" data-search="false">
	<label for="brand-select-no-search-demo" class="input__label"><span class="u-sr-accessible">Select your brand</span></label>
	<select class="select" id="brand-select-no-search-demo" name="brand-select-no-search-demo">
		<option data-placeholder="true"></option>
					<option value="Bosch">Bosch</option>
					<option value="Siemens">Siemens</option>
					<option value="Whirlpool">Whirlpool</option>
					<option value="Samsung">Samsung</option>
					<option value="LG">LG</option>
					<option value="Electrolux">Electrolux</option>
					<option value="Miele">Miele</option>
					<option value="Indesit">Indesit</option>
					<option value="Candy">Candy</option>
					<option value="Beko">Beko</option>
					<option value="Hoover">Hoover</option>
					<option value="AEG">AEG</option>
					<option value="Hotpoint">Hotpoint</option>
					<option value="Zanussi">Zanussi</option>
					<option value="Haier">Haier</option>
					<option value="Hisense">Hisense</option>
					<option value="Ariston">Ariston</option>
					<option value="Brandt">Brandt</option>
					<option value="Daewoo">Daewoo</option>
					<option value="Smeg">Smeg</option>
			</select>
</div>

List of arguments for select

Argument	Type	Description	Possible Values
label	string	Defines the label of the field (mandatory even if label is hidden).	—
label-slug	string	Defines the label that will be used for the 'name', the 'for' and the 'id' attributes linking the label and the select.	—
placeholder	string	Defines the placeholder text shown before a value is selected (used as data-placeholder by select.js/SlimSelect).	—
options	array	List of selectable option values. Pass a PHP array from get_template_part, or a comma-separated string.	—
multiple	boolean	Whether multiple options can be selected.	true, false
search	boolean	Whether the search input inside the dropdown is shown. Defaults to true.	true, false
disabled	boolean	Indicates whether the field is disabled.	true, false
theme	string	Specifies the theme of the component.	light, dark
size	string	Defines the size of the component.	default, small

Design System

Select

Single select

Multiple select

Select without search

List of arguments for select

Basics

Components

Templates