Select

Visual representation

The following element is a visual representation of the select component which would ideally be used within a form element.

<div class="aegov-form-control">
	<label for="opt1">Select an option</label>
	<div class="form-control-input">
		<select id="opt1" name="opt1"> 
			<option>option 1</option>
			<option>option 2</option>
			<option>option 3</option>
		</select>
	</div>
</div>

Code structure

This is the basic code structure of how a select has to be created. This code structure can be used to create select elements.

<div class="aegov-form-control">
	<label for="referenceId">Select an option</label>
	<div class="form-control-input">
		<select id="referenceId" name="nameRelatedSelect" autocomplete="select-name"> 
			<option>Option 1</option>
			<option>Option 2</option>
			<option>Option 3</option>
		</select>
	</div>
</div>

Multi-select

To allow users to select multiple options from the select menu, add the ` multiple ` attribute to the <select> element.

<div class="aegov-form-control">
	<label for="country_multiple">Select options</label>
	<div class="form-control-input">
		<select multiple id="country_multiple" name="country_multiple" autocomplete="country_multiple_name"> 
			<option>United Arab Emirates</option>
			<option>India</option>
			<option>United Kingdom</option>
			<option>USA</option>
		</select>
	</div>
</div>

Select with error message

The "Select with Error Message" variation enhances the select component with an error state, visually indicating to users when there is an issue with their selection. By applying the class name control-error to the aegov-form-control class, both the label and error message will be styled with a distinctive red color, drawing attention to the select field that requires correction.

<div class="aegov-form-control control-error">
	<label for="error_select">Select an option</label>
	<div class="form-control-input">
		<select id="error_select" name="error_select"> 
			<option>Option 1</option>
			<option>Option 1</option>
			<option>Option 1</option>
		</select>
	</div>
	<p class="error-message"><strong>Error:</strong> We encountered a problem with your selection.</p>
</div>

Size variations

The select sizes variation provides three size. These classes allow customization of the label font size and select dimensions to suit specific design requirements.

<div class="space-y-4">
	<div class="aegov-form-control control-lg">
		<label for="countryLg">Select an option</label>
		<div class="form-control-input">
			<select id="countryLg" name="countryLg" autocomplete="countryLg-name"> 
				<option>United Arab Emirates</option>
				<option>India</option>
				<option>United Kingdom</option>
			</select>
		</div>
	</div>
	<div class="aegov-form-control">
		<label for="country">Select an option</label>
		<div class="form-control-input">
			<select id="country" name="country" autocomplete="country-name"> 
				<option>United Arab Emirates</option>
				<option>India</option>
				<option>United Kingdom</option>
			</select>
		</div>
	</div>
	<div class="aegov-form-control control-sm">
		<label for="countrySm">Select an option</label>
		<div class="form-control-input">
			<select id="countrySm" name="countrySm" autocomplete="countrySm-name"> 
				<option>United Arab Emirates</option>
				<option>India</option>
				<option>United Kingdom</option>
			</select>
		</div>
	</div>
</div>

State

By default, the ` hover ` and ` focus ` state of a select has been defined. It is triggered when a user interacts with the element. The ` disabled ` status is set via scripting.

Disabled state

By adding a ` disabled ` attribute to a select, you will essentially tell the browser that the select is unusable. Disabled state for a select would render it visually lighter. Add the ` aria-disabled="true" ` attribute to select which is disabled as well as an added measure for assistive technologies.

Accessibility

Keyboard interactions are incorporated for accessibility, where 'Tab' to interacts with a select, and 'Spacebar Key' key toggles the select options. This allows users to show and select the options using the keyboard.

ARIA attributes and supporting attributes must also be added to select components. The following ARIA and supporting attributes will apply.

Responsive element

This component can be resized based on breakpoint prefixes.

You can always control the responsive nature of a component by adding the screen size attribute and changing the size of an element per screen size. Read more about Responsive Design and how to use breakpoint prefix for classes on TailwindCSS.com

Hence, this component's size variations can be combined with breakpoint prefixes to control the size of the component on various screensizes.

By applying the ` control-sm `, the ` md:control-base ` and ` 2xl:control-lg ` classes, the select dimensions adjust to different screen sizes, ensuring optimal visibility and usability.

RTL support

This component is supported and configured to work for RTL layouts. Refer to the layout guideline to understand how to enabled RTL for websites.

The following is an example of this component with text in Arabic.

All components that are part of the UAE Design System support RTL and have been designed to work for languages that require RTL layout.

The typography guidelines will also provide further information on use of the font stack for the Arabic language.

Where to use a select?

• When providing the user to select a single option from a choice of many - such as a country, city or state selection.
• Adding a selection dropdown to filters for categories, brands and other optioins.
• Useful when added to sorting options to select how a list must be sorted, such as "most relevant first" or "newest item first"
• To allow the user to make a selection which may be grouped.
• When a user wants to save a certain preference - such as time zone, prefered language, display date format, etc.