The following components are used to change the state of a property or setting from a set of predefined values.
Use a checkbox to enable or select an option from a list; or as a singular option. For example, a singular option that is an instruction to the system such as ‘Show password’, or selecting a property to be applied or unapplied to add or change a setting; such as changing a font style to ‘Bold’ and ‘Italic’.
The Checkbox API is a component with two states: checked or unchecked. It can be used to set boolean options.
If you are asking the user to turn a setting or instruction on or off, then use a switch instead. For example, turning the Bluetooth setting on or off.
Make the options clear
Use indeterminate checkboxes when the value is neither checked or unchecked.
Make it obvious
Don’t make it hard for the user to understand the effect of the unchecked value.
When aligning checkboxes with labels, or other dependent controls, it is important that the user knows which checkbox belongs to the corresponding explanation.
For more guidance on using familiar language and the right tone of voice for labels see Writing (coming soon).
Use radio buttons when there is a list of two or more options that are exclusive of each other and only one choice can be selected.
Choosing a message tone
Options presented with radio buttons require less mental effort, because users can easily compare options as they are all visible at once.
One selection – use radio buttons
Multiple selection – use checkboxes
Use other controls if necessary
A toolbutton is a borderless button, as found in the header or a bottom-edge panel. It usually consists of an icons, but may instead contain text buttons. See Buttons (coming soon) for more details.
If you have a large set of radio buttons then place them in a list. That way users can easily navigate and scroll through the options.
A list of organizations
Don’t interrupt the user
When a user selects an option avoid hindering them from choosing another option by opening up a dialog or closing the window.
The Switch API is a component with two states: checked or unchecked. It can be used to set boolean options. The behavior is the same as CheckBox, the only difference is the graphical style.
If you are asking the user to turn a setting or instruction on or off, then use a switch.
When not to use
If you asking the user to choose between options to set a value, then use checkboxes or radio buttons instead. For example, choosing a selection of font styles where you can have a combination.
Date and time pickers
The toolkit provides a combination of multiple pickers for you to use to show the time and date in your app.
Use the spinner component to display a set of values on a reel that can be either flickable or draggable.
The PickerPanel API is a component that provides the date and time values with picking functionality.
Display month, year and day
There are three possible ways you can layout pickers: fullscreen overlay, as a popover, or embedded into the UI.
Use a fullscreen overlay in larger screen environments, such as tablet or desktop.
The Time Picker supports hour, minute and seconds elements in any combination; except hours with seconds.
Three spinner time picker
An AM/PM selector will be added if the 12-hour clock is used.
Use interactive sliders to select a value from a continuous or discrete range of values.
The Slider API is a component that allow the user to select a value from a continuous range of values.
You can choose between different slider types to allow the user to set different values.
The interactive nature of the slider makes it a great choice for settings that reflect intensity levels, such as volume, brightness, or color saturation.
You can use this slider to select a specific value or a maximum value in a range. For example, adjusting the screens brightness percentage.
Minimum value slider
System volume control
A system volume control is a control that any app can embed in its UI. You should use this slider control when your app needs only one volume control.
For example, if you app has a media player or is a game that has sound effects, but no background music.It consists of a slider that automatically reflects and adjusts the audio volume for the current output role through the current output device.
The System volume control component is currently under heavy development because it might also include other audio features, so you won’t have to worry about developing it yourself.
The advantages of using system volume control:
- people won’t be annoyed that your app is louder or quieter than others, because your app uses the system audio volume
- volume change notifications don’t appear in front of your app when the slider is altered (especially important for a video player)
- you don’t need to implement your own volume-adjusting code, because Ubuntu changes the volume of your app automatically
- any future Ubuntu features for audio routing will become available to your app automatically, without any code changes required
If your app plays multiple types of sound, then provide a mute button and separate volume control for each type. For example, a game that plays background music as well as sound effects. Avoid labelling the system volume control because it already includes icons that indicate its purpose.