Select & Input
Components and guidelines for creating inputs such as text fields or selection options such as checkbox or radio buttons
Input
Entering data, i.e. typing by users is known as ‘input’.
Principles
Distinctive
Inputs should be recognizable and easy to interact with.
Field Label for Clarity
Users need to know what data is required for input
Necessary Information only
Ask only for specific information that is required.
Text Fields
The main component of input is text fields. They need to be placed appropriately, in an accessible size and style that considers user experience best practices.
Usage
Text fields are an important element of forms and help collect information from users. There are two variants for text fields: primary, which uses outlines, and secondary, which uses filled containers
Outline
As the primary variant for text fields, it has a higher contrast and uses an outline container.
Fill
Secondary text field variants use filled containers.
Usage Scenario
Use the primary variant as the default. For the following cases, you can choose secondary variant over primary:
-Background is not pure white (grey)
-Other elements and components are outlined (create contrast)
-There are multiple inputs in a form (balance weight of the layout)
Do
Use same text field variant in a layout
Don't
Use primary and secondary text fields in a layout
It adds priority to one input over the others
States
There are different states based on user interaction with text fields.
Primary text field (outlined)
Default state
Hover state
Focused state
Filled state
Validation state
Disabled state
Secondary text field (filled)
Default state
Hover state
Focused state
Filled state
Validation state
Disabled state
Default state
Text inputs in their natural state.
Hover State
When users hover their cursor over the text field.
Focused state
After clicking on the text field, it transforms to a focus state, allowing users to enter text into the text field.
Filled state
Entered data activates this state.
Validation state
If the text field contains a validation (such as error or success), this state activates
Disabled state
This state helps users understand not to enter any information.
Field label
A field label describes a text field, informing users of what they need to type into the text field. Place it on the top of the container.
- Short (1–3 words)
- Written in sentence case (the first word capitalized, remaining words in lowercase)
Password
Password
Every text field should have a field label and should be visible at all times.
Do
Keep the field label short and in a single line
If you need to explain the input, use helper text
Don't
Wrap or truncate the field label
Field labels should be as short as possible
Do
Use short and easy-to-understand labels
.png)
Don't
Use questions or creative labels
Don't
Use different styles or placements for labels
Additional Elements
You can add more information about the inputs needed by using the following:
These elements are:
- Helper text
- Icon
- Placeholder
Helper Text
Helper text provides more information about the input required, reflects errors for incorrect inputs, and provides assistive information for success.
Helper text usage
Description
Validation
Description
Descriptions give hints or helpful tips such as requirements for correctly filling out text fields or preventing mistakes
Write descriptions using these guidelines:
- Use only if it provides helpful guidance (do not repeat field label text)
- Follow capitalisation rules (use sentence case)
- Keep the description as brief as possible, up to 3 lines
- Use positive language
Do
Use helper text description for useful information
.png)
Don't
Repeat the field label in helper text
For more information, see Tone of Voice
Validation
Validation shows a success state or an error state when field requirements are not met, indicating how users can edit their input.
Usage guidelines:
- Use success state for inputs that require a check, such as a username or password
- Donʼt use validation state and style as description helper text
- Donʼt use the same copy from the description on the error
- Always provide a solution when there is an error state
Do
Add solution in error text
Don't
Use negative or insufficient error copy
Do
Add relevant icons to help users
Don't
Use validation style for description helper text
Do
Switch help text with error text
Don't
Place error text under helper text
Icon
Text fields can have a leading or an ending icon.
Application
Leading icon
Ending icon
Usage guidelines:
- Use icons as buttons with a specific action. Donʼt use them for aesthetics
- Icons can be used only within the container. Avoid using them next to the field label or helper text.
Don't
Use icons next to field label or helper text
Placeholder
Placeholder text is temporary and disappears once a user inputs relevant text into the field. Use placeholders to show examples of what you want users to type into the text field.
Phone number
Text Area
Use Text areas when users need to input long text. Apply the guidelines from the text field for the text area as well
Outlined
Filled
Size
There are three text field sizes to choose from. The default size is 48px height and should be used in most components such as forms, dialogs, etc. The second size is 56px and can be used when there are less than three inputs in a layout, and you want to emphasise these inputs. The compact size uses 40px
Text field sizes
Compact (40px)
Default (48px)
Large (56px)
For cases such as a full-screen search, a larger 64px text field can be used. This size cannot be used in forms.
Do
Use same size for text field and buttons
Don't
Use different sizes for text field and buttons
Width
The default width for text fields is 280px and 320px for large sizes. You can alter text field sizes based on the type of input. You can also use full-width text fields relative to their container (less than 600px). The larger (64px) text field can have wider width.
Application
This search page uses the 64px text field.
Specs
Understanding text field specs such as size, width, radius and colour
Default (48px)
Field label: 16px (400)
Text input: 17px (400)
Helper text: 14px (400)
Default state border: 1px
Focused state border: 1px
Default state
Focused state
Leading Icon
Ending icon
Large (56px)
Field label: 17px (400)
Text input: 18px (400)
Helper text: 15px (400)
Default state border: 1px
Default state
Focused state border: 1px
Focused state
Small 40px
Field label: 15px (400)
Text input: 16px (400)
Helper text: 14px (400)
Default state border: 1px
Default state
Focused state
Colour
Text fields use primary colour for focused state by default. It can use UAE black as well.
Primary text field (outlined) colour
Default state
Field label: UAE black 100 - 72%
Helper: UAE black 100 - 54%
Border: UAE black 100 - 32%
Hover state
Field label: UAE black 100 - 72%
Helper: UAE black 100 - 54%
Border: UAE black 100 - 32%
Focused state
Field label & Border: Primary colour
Text input: UAE black 100
Helper: UAE black 100 - 54%
Filled state
Field label: UAE black 100 - 72%
Helper: UAE black 100 - 54%
Border: UAE black 100 - 32%
Text input: UAE black 100 - 72%
Validation state (success)
Text input: UAE black 100
Helper: UAE Green 50
Text input: UAE black 100
Icon & Border: UAE Green 50
Validation state (error)
Field label: UAE Black 100
Helper: UAE Red 60
Text input: UAE black 100
Icon & Border: UAE Red 60
Disabled state
Default state 54%
Secondary text field (filled) colour
Default state
Field label: UAE black 100 - 72%
Helper: UAE black 100 - 54%
Border: UAE black 100 - 32%
Hover state
Field label: UAE black 100 - 72%
Helper: UAE black 100 - 54%
Border: UAE black 100 - 32%
Focused state
Field label & Border: Primary colour
Container: Primary colour - 5%
Text input: UAE black 100
Helper: UAE black 100 - 54%
Filled state
Field label: UAE black 100 - 72%
Helper: UAE black 100 - 54%
Border: UAE black 100 - 32%
Text input: UAE black 100 - 72%
Validation state (success)
Field label: UAE Black 100
Helper: UAE Green 50
Text input: UAE black 100
Icon & Border: UAE Green 50
Container: UAE Green 50 - 5%
Validation state (error)
Field label: UAE Black 100
Helper: UAE Red 60
Text input: UAE black 100
Icon & Border: UAE Red 60
Container: UAE Red 60 - 5%
Disabled state
Default state 54%
On light backgrounds (not pure white), use pure white for filled text fields.
Default state
Hover state
Focused state
Radius
Choose the right radius based on your entity’s visual identity. The higher the radius, the harder it is to balance and align your layout
The default radius for text fields is 10% (or 5px).
Formal
0% radiusBalanced (Default)
10% radiusFriendly
50% radius
Do
Use consistent radius across text fields and buttons
Caution
Add 4px to the margins for high radius text fields
Don't
Use different radius for text field and buttons
Rating
The rating component allows users to rate your service or experience.
Thumbs rating
Usage
Use Thumbs rating when there are only two options (good or bad). Use Star rating when you want to measure the level of experience.
Application
How was your experience from using this service?
Was this guide helpful?
Colour
Rating components can be used in UAE Black and Core colour (Core colour adds emphasis to the component) or Functional colour if you want to show the impact.
Do
Use UAE Black or Core colour
Helps to add emphasis
Do
Use functional colours to show impact of users input
Learn about functional colours in Colour System
Size
Use standard size component next to other elements/components. Use large size component when rating is the main user interaction you seek (in a dialog or card).
Standard
Large
Select
Select enables a user to choose single or multiple items from a list of options.
Select components are:
- Checkbox
- Radio button
- Dropdown
- Tags
Checkbox
Checkboxes provide users with a range of options for a given statement, where the user may select any number of choices, ranging from none to multiple. Checkboxes always include a label.
Default state
Hover state
Selected State
Disabled state
Label
A checkbox always needs a label. The label should be centre-aligned with the checkbox icon and can be wrapped to up to 2 lines.
Correct Alignment
Do
Present options using the same structure
Don't
Pair different options or structures
A checkbox label should always select the checkbox when clicked.
Do
Make label as a direct child of the checkbox
Don't
Create checkbox that only works when clicking the icon
Size
There are two checkbox sizes to choose from.
Choose checkbox sizes in relation to:
- Other component sizes (use similar sizes)
- Frequency of usage (if there are few, you can use large sizes - otherwise, use default sizes)
Default (20px)
Large (24px)
Specs
Understanding text field specs such as size, width, radius and colour
Default
Label: 16px (400)
Icon: 20px
Large
Label: 18px (400)
Icon: 24px
Radio Button
Use radio buttons when a list of two or more options are mutually exclusive, meaning the user must select only one option.
Default state
Hover State
Selected State
Disabled state
Label
Radio buttons always need a label.
Do
Keep the default option selected
Do
Add a radio with a “None” option if you need an unselected state
Do
Make label as a direct child of the radio so that clicking on the label works as well.
Don't
Create radio buttons that only work when clicking the icon
Size
There are two radio button sizes to choose from..
Choose radio button sizes in relation to:
- Other component sizes (use similar sizes)
- Frequency of usage (if there are few, you can use large sizes - otherwise, use default sizes)
Default (20px)
Large (24px)
Specs
Default
Label: 16px (400)
Icon: 20px
Large
Label: 18px (400)
Icon: 24px
Colour
All selected components (radio and checkbox) use primary colours for the selected state. You can also use UAE black 100 for selected states to reduce colour usage in the UI.
Do
Use core colour for selected state
Don't
Use light or dark (low contrast) primary levels
Accessibility
Since a screen reader will read the label before each option, include a label for each group of selected components.
Do
Use label for a group of Select components
Dropdown
Dropdown are text fields providing different options to select from. When there are more than five options to choose from, a dropdown can be used. Dropdown can include a search function..
Implement the same text fields guidelines for dropdown.
Default state
Hover state
Selected State
Disabled state
Tags
Also known as chips, they allow users to select multiple options.
Default state
Tag labelHover state
Tag labelSelected State
Tag label Tag labelDisabled state
Tag labelRadius
Choose the right radius based on your entity’s visual identity. The higher the radius, the harder it is to balance and align your layout
The default radius for text fields is 10% (or 5px).
Sharp
0% radius
Tag labelDefault
10% radius
Tag labelCurved
50% radius
Tag labelTags Size
There are two tag sizes to choose from.
Choose tag sizes in relation to: - Other component sizes (use similar sizes) - Frequency of usage (if there are few, you can use large sizes - otherwise, use default sizes)
- Other component sizes (use similar sizes)
- Other component sizes (use similar sizes)
Small (32px)
Default (36px)
Large (40px)
Specs
Default
Label: 15px (400)
Large (56px)
Label: 16px (400)
Tag label
Label: 14px (400)
Application
This search page uses the 64px text field. .
Form
Forms consist of input and select components that collect various kinds of information.
Principles
Choose the Right Component
Follow the guidelines and select the right component for your form to allow for a consistent, improved user experience.
Ask what’s Necessary
Only ask for necessary information in order to proceed to the next step
Use Single Columns
Improve user experience by using single columns. This aids content readability.
Principles_Avoid_Text_Input
Mouse interaction allows for quicker data collection, so try to keep your content click-friendly and avoid using too much text input.
Support Input Fields
Use additional elements to help users understand how they need to interact with the input field.
Group Relevant Fields
Use less space between related input fields or selections to make them look like they belong to one group. Keep adequate space between different groups.
Keep Forms Short
Too many input fields and selections intimidate the user. Try using a progress bar if there are many steps to help overcome user fear/frustration.
Clear CTA
Write bulletproof CTAs to ensure users complete all necessary steps in a process and achieve their goal.
Application
Form
Educational level
Which page helped you?
Filter dialogue
Categories
Upload file
Upload your portfolio
Formats: PDF, Docx, Zip, Rar
Maximum size: 20 mb
Choose the Right Component
Radio
If your list has only a few options (less than 5) and users can only choose one, use a radio button.
Checkbox
If your list has only a few options (less than 5) and users can make multiple choices, use a checkbox.
Dropdown
If you have 5 or more options to choose from, use a dropdown. If there are more than 10 options, use a search component within the dropdown.
Required Fields
In forms, some inputs may be mandatory or optional. In such cases, mark the optional fields instead of required fields.
Do
Only mark the optional fields
Don't
Mark required inputs
Keep it Short
Only ask for essential information. Avoid asking for information which doesnʼt serve a purpose.
Do
Don't
Single Column Design
Do
Don't
Place inputs with default width or selects in a row or place radio buttons and checkboxes next to each other
Avoid Text Input
If the required information can be collected using select components, don’t use input fields.
Do
Don't
Group Form Content
Reducing input spacing helps similar information look more relevant and grouped together, increasing space separates the items. Group form content to help maintain and improve user experience.
Do
.png)
Don't
Reduce Form Content
Inserting too much information can make users feel frustrated; they might also skip filling the form as it is too intimidating. If there are more than six inputs or selections to complete within a form, try adding another step to the data entry process to give users an idea of how far they’ve progressed.
For more information, Progress bar .
See more examples in Templaes