Controls

Checkbox

A checkbox allows the user to select one or more options from a number of choices.

Anatomy

Usage

The checkbox label can be aligned to the right or left side of the control.
The control has 3 possible states: unchecked (☐), checked (✔︎), or intermediate (-︎)
Intermediate checkbox are often used in a hierarchy, when not all children are checked, the parent remains indeterminate.
Content guidelines: Keep labels short and descriptive, start each label with a capital letter, and don’t include punctuation at the end.

States

Do’s & Don’ts

Radio button

Radio buttons are used for choosing a single option out of a list.

Anatomy

Usage

Only one option can be selected at a time. After choosing a new item, the previous choice is automatically deselected.
The radio button label can be aligned to the right or left side of the control.
The control has 2 possible states: unchecked (○) , checked (●).
Content guidelines: Keep labels short and descriptive, start each label with a capital letter, and don’t include punctuation at the end.

👍 Rule of thumb
Radio button list should include 2-6 options. If you have only one option, consider using a checkbox.

States

Do’s & Don’ts

Toggle switch

A toggle switch is used to switch between two opposite states, such as: On / Off.

Anatomy

Usage

The toggle switch may contain a label, from the right or left side to the control.
The control has 2 possible states: On (1), Off (0).
Switch toggle can be stand-alone, or as a part of a group.
Content guidelines: The toggle labels should describe what the control will do when the switch is on; they should not be neutral or ambiguous. Keep labels short (4 words or less).

States

Do’s & Don’ts

Number picker

Number picker allows the users to select a number from a pre-defined range, using an input field.

Anatomy

Usage

The user can change the value by clicking on the controls, or by typing in the input.
The number picker controls can be up and down chevrons (▼ ▲), or ׳+׳ and ׳-׳ buttons.
Text is aligned to center by default. The alignment could be changed, depending on the implementation or use case.

Sizes

Max width: The input box should have a fixed width, determined by the maximum amount of digits allowed, so it won’t change width when used.
Min width: The minimum width of the input box is 32 pixels.
Height: The picker comes in 3 possible heights: small, regular and large

Variants

States

Toggle buttons

Toggle buttons, also known as ‘select buttons’, are controls that allow the user to select single or multiple options.

Single select toggle

Single select toggle allows the user to select one option. There are 2 types of single select - primary and secondary.

Anatomy

Usage

Actions can be presented in text or in icons.
It is recommended using 3-5 options. The minimum number of options allowed is 2.
If you have only two options, consider using a toggle switch.

Variants

Multi select toggle

Multi select toggle allows the user to select one or more options. There are 2 types of multi select - primary and secondary.

Anatomy

Usage

Actions can be presented in text or in icons.
It is recommended using 3-5 options. The minimum number of options allowed is 2.

Variants

🔮 Tip box
When using the icon toggle buttons, consider adding a tooltip to clarify the actions.

Do’s & Don’ts

Chips

Chips, also known as 'tags', carry dynamic information and metadata. The chips allow users to enter text, make a selection and filter.

Anatomy

Sizes

Chips come in 2 sizes, regular and large:

Variants

Chips can also include: icon, text avatar, image avatar, or a color tag.

Input chips

Input chips are used to show a selection in input fields, forms, or as part of the multi-select component.
Their content can be typed in by the user, or a selection from a pre-defined list.
In order to remove the chip, the user has to choose the x directly or delete with backspace.

States

Filter chips

Filter chips are used to filter content, by turning on/off the displayed data.
Usually, filter chips will be predefined, or added by the user from a pre-existing list.
Filter chips can be removable or not, according to the situation.

States

Do & Don’ts

Slider

Sliders allow users to choose from a range of values.

Anatomy

Usage

Sliders are ideal for adjusting settings (i.e: volume or brightness levels).
When interacting with a slider, changes should be reflected immediately.
Slider may or may not include: Label, min/max values, steps and tick marks.
Slider’s label can be placed on top or on the left side of the slider.

Types

Micro Focus has two types of sliders, single slider and range slider:

Variants

Showing the slider value is optional. There are 2 ways to show the value:

With tooltip: the value is shown on only ‘hover’ and ‘active’ states.
With input: an input field shows the value, and enables the user to type as well.

States

With tooltip

With input

Examples & use cases

Single slider with top label, on ‘hover’, with tooltip

Slider – example 1

Single slider with a side label and an input field

Slider – example 2

Date picker

Date picker is a visual way for the users to select past, present, or future dates.

Anatomy

Usage

Use a date picker when the user needs to know a date’s relationship to other days or when the date might change.
The user can view and pick dates from the calendar drop down or manually type in the input field.
The date picker minimum width is 304 pixels.

Variants

Examples & use cases

Date picker with alternate button group.
In this option, ‘OK’ close and save current selection, ‘Cancel’ closes without saving.