Style Guide
Search…
Pickers
Pickers can be radios, checkboxes, filters, and toggles.

Usage of Pickers

Pickers allow users to select an option (or options) before taking an action. Pickers can be found on booking flows and filters.

Types of Pickers

Radio Pickers (picker-radio)

Radio buttons describe complex choices or provide all the available options next to each other. Radio groups must be stacked vertically.
1. Current Selection
1
border: 1px
2
border-color: blue-medium
3
size: 24px
4
5
Fill:
6
color: blue-medium
7
size: 16px
8
9
padding-left: 16px
10
paddig-right: 16px
11
padding-top: 16px
Copied!
2. Content Header (a-text-paragraph)
1
font-weight: book
2
font-size: 16px
3
font-color: text-black
Copied!
3. Supporting Content (a-text-paragraph) Supporting Content is optional and used to give extra information about that particular option.
1
font-weight: book
2
font-size: 16px
3
font-color: slate-dark
Copied!
4. Unselected Option:
1
border: 1px
2
border-color: slate-medium
3
size: 24px
Copied!
5. Dividing Line
1
border: 1px
2
color: slate-light
3
width: 343px
4
5
padding-top: 16px
Copied!

Checkboxes

Checkboxes have the same structure as radio groups but are only used when the user can select multiple options. Each checkbox is independent of all other checkboxes in the list.
1. Current Selection
1
border-radius: 3px
2
color: blue-medium
3
size: 24px
4
5
font-awesome: check
6
font-weight: regular
7
font-size: 16px
8
padding: 4px
9
10
padding-left: 16px
11
paddig-right: 16px
12
paddig-top: 16px
Copied!
2. Content Header (a-text-paragraph)
1
font-weight: book
2
font-size: 16px
3
font-color: text-black
Copied!
3. Supporting Content (a-text-paragraph) Supporting Content is optional and used to give extra information about that particular option.
1
font-weight: book
2
font-size: 16px
3
font-color: slate-dark
Copied!
4. Unselected Option
1
border radius: 3px
2
border: 1px
3
border-color: slate-medium
4
size: 24px
Copied!
5. Dividing Line
1
border: 1px
2
color: slate-light-medium
3
width: 343px
4
5
padding-top: 16px
Copied!

Filter

Filter pickers are used when the user can only select one option. Unlike radio groups, filter options are short (can only be one word or number) and there are less than 5 options in total.
1. Selection Filter pickers always have a default selection. Color is used to denote a selection.
1
Fill Color:
2
background: blue-medium [selected]
3
background: white [unselected]
4
5
Text (a-text-paragrah)
6
font-weight: book
7
font-size: 16px
8
text-color: white [selected]
9
text-color: text-black [unselected]
10
11
padding-left: 10px
12
padding-right: 10px
13
padding-top: 16px
14
padding-bottom: 16px
Copied!
2. Corner Radius
1
border-radius: 5px
Copied!
3. Structure
1
border: 1px
2
border-color: slate-medium
3
max-width: 343px
4
5
6
padding-top: 16px
7
padding-bottom: 16px
Copied!

Toggle

Toggles are used specifically for settings & preferences (Account, Pro Settings) when the user has a choice turning a certain state on or off.
1. Pill Structure: Off
1
Pill
2
max-height: 26px
3
max-width: 46px
4
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, .2)
5
6
Circle
7
border: 1px
8
box-shadow: 0px 1px 1px rgba (0, 0, 0, .2)
Copied!
2. Pill Structure: On
1
Pill
2
max-height: 26px
3
max-width: 46px
4
color: blue-medium
5
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, .2)
6
7
Circle
8
border: 1px
9
border-color: blue-medium
10
box-shadow: 0px 1px 1px rgba (0, 0, 0, .2)
Copied!
Last modified 2yr ago