Form Fields

Usage

Form field is used when the user needs to enter a small amount of data inside the form like text, number, password, url or similar. Input field can contain the prefix or suffix to better describe what type of data is required. Prefix or Suffix can contain short plain text or a symbol (like percentage or monetary value).

Behaviour

All form fields should have clear visual cues for changing their state based on user interaction (hover, focus or triggered by a validation feedback)
The text label should be associated with a form field and clicking it should activate the field
When a form field is disabled, it becomes non-interactive, and no change can be made on it

Best Practices

All form fields should be accompanied by a text label, and form field placeholders can be used as additional support (for example for displaying an example of data that is required)
If the field is optional, state this in the text label by writing (optional)
When building a form, it’s best to keep form fields in one, two or three columns, unless they are a part of a more complex grid

Field Text labels

Each form field can be accompanied by a text label that describes the required data. The text label can also have an “optional” indicator, to mark the fields that are not mandatory.

The form fields can have placeholder text inside to better explain the required action or data type. Optional text label that indicates the character count or validation feedback can be used at the bottom left of the input field as part of the validation pattern. If more information is needed to explain the field, the Info icon tooltip trigger can be placed next to the input text label with 8px margin in between.

Input field

Input field is used when the user needs to enter a small amount of data inside the form like text, number, password, url or similar.

Input field can contain the prefix or suffix to better describe what type of data is required. Prefix or Suffix can contain short plain text or a symbol (like percentage or monetary value). All input fields radius is 2px

Best Practices

Use one word or a symbol when using input prefix or suffix
Indicate character count limitation or validation feedback by placing the text label to the bottom left of the input field
Use prefix to indicate monetary value, and suffix to indicate percentage

Text area

Text area is used when user needs to enter a larger volume of text. The initial height of the text area inside the form can be set based on the text line height - by default, it is set to three rows. Additionally, the user should be able to change the height of the text area by dragging it on the bottom right corner.

Best Practices

Use text area when the expected input from the user could be more than one line of text
Indicate character count limitation or validation feedback by placing the text label to the bottom left of the input field

Form Field States

All form field types have the same appearance throughout the states, as shown below.

Form Field Sizing

Form fields (apart from text area) can have a different height, following the same principles as button sizes. Different sizing can be used to save space in condensed grids or tables.

Dropdown (select) is used to enable the user to pick from the list of at least three available options. Clicking this component triggers the opening of the dropdown menu from which one or more options can be chosen.

Best Practices

Use single select dropdown when the user can select just one of the available options, and multi-select dropdown to save space on the ui when the user can choose or define more than one option
Sort dropdown menu items alphabetically or by some other logical way
Maximum recommended height of the dropdown menu is 320px; width can vary based on the input or dropdown field that controls it
Ensure accessibility by allowing keyboard navigation and selection of the item by hitting Enter

There are different dropdown items that can be used to display selectable content in the dropdown. Apart from the default text, they can also include icon and description. To group content inside the dropdown, dropdown group title component can be used.

Best Practices

Always show 8 items in a dropdown menu list
Use textual dropdown item for most of the cases
Use dropdown item with an icon, if icon can help to better convey the information; for example to show status of the item being selected, or to better explain the action
Use dropdown item with a description if there is a need for an elaboration to help user decide which option to choose

Behaviour

Scrolling

If all menu items aren't displayed at once, menus can be scrollable. In this state, menus show a persistent scrollbar. This can be browser default.

Position

Dropdown menus are positioned relative to both the element that generates them and the edges of the screen or browser. They can appear in front of, beside, above, or below the element that generates them.

Default placement for a dropdown menu is typically positioned below the element that generates it. Selecting outside of the menu will make the dropdown disappear.

Cascading menu

Cascading menus allow users to choose from a large variety of choices, by displaying menus with multiple levels of hierarchy.

They are organised into menus of parent list items that contain child list items. Child list items appear to right or left of parent list items, depending on where there is room to expand child list items. Selecting outside of the menu will make the dropdown disappear.

Dropdown menu

Upon selecting an item, an exposed dropdown menu updates to display that item. In some cases, it can accept and display user input (whether or not it’s listed as a menu choice). Selecting outside of the menu will make the dropdown disappear.

Editable dropdown menu

An editable dropdown menu displays the currently selected menu item above the menu. A user can enter a value that’s not listed in the menu. You can restrict the types of values that users can enter to certain types. Selecting outside of the menu will make the dropdown disappear.

Filled dropdown menu

A filled dropdown menu looks like a filled text field. It displays the currently selected menu item above the menu. Selecting outside of the menu will make the dropdown disappear.

Multi-select dropdown menu

Once the user chooses an option from the list, a tag will appear to the left of the label containing the name of the selected items. The option chosen will no longer be shown in the dropdown menu as it has been selected. Selected items float to the top of the list in alphanumeric order. Selecting outside of the menu will make the dropdown disappear.

To clear selected items from the input field, click the “x” icon next to the value. To help with clarity, a hover over tooltip can appears when the user hovers over the “x” icon to indicate the intended action results.

This variation of dropdown follows the same interaction patterns described above with the following exceptions:

The tag will remain persistent except when the user is inputting text.
Selected options will appear at the top of the list.
The dropdown menu does not close once the user makes a selection. The user will need to click outside of the dropdown menu or on the parent element to close the menu.

Date picker

Usage

Date picker should be used when user needs to choose a date value. The value can be entered by typing into the field, or by clicking the calendar icon and choosing a value from the dropdown.

Best Practices

Always use date picker dropdown along with the input field to enable the user to either pick the date from the dropdown, or input the date manually
Date picker can be used to choose a single point in time or a range. The data aggregations can be day, month or year.
The default date will be based on country of use. Date format should be shown using the slashes i.e DD/MM/YYYY (UK & Europe) or MM/DD/YYYY (USA)

Postcode look up

Postcode lookup help users provide an address using an address lookup or Multiple text inputs

Behaviour

The postcode lookup lets users specify a UK address by entering their postcode and selecting their address from a list. There is also an option to enter a street name or number.

Best Practices

Make it clear that it will only work for UK addresses
Provide a manual option for users with international addresses or addresses that are missing or not properly listed in the address lookup
Let users enter their postcodes in upper or lower case and with or without spaces