The Select component is a versatile input element that allows users to choose from a list of options in a select menu. It provides an intuitive and space-efficient way to collect user input, especially when there is a long list of choices. The "Select" component is commonly used in forms, search fields, and other user interface elements.


The select component offers an elegant and user-friendly solution for presenting a set of choices to users in a select menu format. It simplifies the process of selecting options, making it ideal for scenarios with limited screen space or a large number of choices.

Visual representation

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

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>
A pro tip for select elements

Always make sure you add the <label> and the ` for="" ` attribute that corresponds to the ID of the select field. This is required to maintain accessibility practices and also provides a better user experience.


Variations are different versions of this component that you may use within your website. The choice of what variation is useful should be based on the user experience study and layout design applied to the page of your website.


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

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.

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.

Class Properties
.control-sm py-2.5 (0.625rem)  /* Element height 40px */font-size: 0.85rem  /* 14px */
.control-base py-3 (0.75rem) /* Element height 48px */font-size: 1rem  /* 16px */
.control-lg py-3.5 (0.875rem) /* Element height 56px */font-size: 1.125rem  /* 18px */

Use of secondary colour

All form elements in the UAE Design System support the use of secondary colour.

Here is an example of the button element in secondary colour. By default, the " aeblack " colour is the default secondary colour used. Refer to the colour system guideline for more information on default colours to be used.


The "Select" component's behavior revolves around user interaction with the select menu. When a user clicks or taps on the "Select" component, the select menu expands, displaying all available options. The user can then choose one of the options by clicking on it, which updates the "Select" component's value.

The "Select" component also supports keyboard interactions for accessibility. Users can open the select menu by pressing the 'Enter' key or the 'Spacebar' key when the "Select" component is in focus. They can then navigate through the options using the arrow keys and select an option by pressing 'Enter'. This keyboard accessibility ensures that all users, including those with mobility impairments, can easily interact with the "Select" component.


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.


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

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.


Select elements, or dropdown menus, streamline user choices by presenting a compact list of options, making them essential for simplifying navigation and selections in web interfaces.

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.