Firefox OS Check Boxes, Switches and Sliders

Basics

Check Boxes, Switches and Sliders have been designed to help aid in the selection of elements. The situation in which one is needed will determine which type needs to be used.

Check Boxes

Check boxes are used to select multiple items within a list while editing. A variety of actions can be applied to selected items such as, marking, moving, downloading, etc. Check boxes appear in blue for these types of actions. When used to select items to be deleted they are red. Check boxes are usually located on the left side of the screen.

Check Box (Idle)
On
Off
Check Box (Delete)
On
Off

Radio Buttons

Radio Buttons are used as unique selectors on a list.

Radio Buttons
On
Off

Toggle Buttons

Toggles turn options and preferences ON and OFF.

Toggles
On
Off

Ticks

Ticks are mainly used on selection overlays. The ON state is denoted with a check mark, while the OFF state is invisible.

Ticks
On
Off

Sliders and Handlers

Sliders can be used to control functions where values increase/decrease such as volume and brightness. Handlers are outlined in blue when pressed.

Sliders and Handlers
Normal
Pressed

Usage Examples

Red check boxes for deleting
Toggle on and off
Tick for single selecting
Brightness slider

Download

You can download the Firefox OS Stencil PSD here.