Pickers
Users can select from multiple options through a few various selector UI.
Dropdown pickers are used when there are multiple, predetermined options for a given input. Our web drop down menus are rendered in the default HTML styling. On desktop, the drop down opens on click. On mobile, the menu opens on tap.
Usage of Pickers
Pickers allow users to select an option before taking an action. Pickers can be found on When and Payment pages.
Type of Pickers
1. Radio Pickers 2. Checkboxes 3. Steppers 4. Date Picker 5. Selector with Images 6. Dropdown Pickers 7. Dropdown Menu 8. Page Tabs
Radio Pickers
Radio buttons are used when there is a list of two or more options that are mutually exclusive and the user must select one choice. Radio groups must be stacked vertically.
1. Current Selection
2. Content
The content must be positioned 16px to the right of the radio button.
3. Unselected Options
4. Dividing Line
Width of dividing lines are variable based on the context. Standalone dividers can take up to 12 columns.
Dividers in cards need to have 32px padding on the left and right and 16px on mobile, in order to have separation within the card.
Checkboxes
Checkboxes are used when the user can select multiple options. For example, adding extras in the booking flow. Each checkbox is independent of all other checkboxes in the list.
1. Current Selection: There can be multiple selections.
2. Content
The content must be positioned 16px to the right of the radio button.
3. Unselected Options
4. Dividing Line
Width of dividing lines are variable based on the context. Standalone dividers can take up to 12 columns.
Dividers in cards need to have 32px padding on the left and right and 16px on mobile, in order to have separation within the card.
Steppers
Steppers are used to indicate a specific amount of one thing, usually in the booking flow. The
1. Engaged Stepper
2. Disengaged Stepper
Disengaged steppers are present when a user has reached 0.
Date Picker
Date pickers are used when users are asked to enter their desired service date on When pages. On mobile web, date pickers will be the native date picker.
1. Container
The width of the container will match the width of the corresponding dropdown picker.
2. Calendar Structure
The width of the calendar will depend on the width of the container. There will be 16px padding around the whole calendar.
3. Typography
The width of the dates and the border around the dates are dependent on the size of the container and calendar. The container should be 1:1 around the dates should be 1:1.
4. Selected State:
5. Hover State:
Selectors
Selectors can be used in lieu of radio buttons to add more imagery onto a page. They can be found on payment or build pages.
1. Container
2. Icon
3. Label
4. Selected Container
5. Selected Icon
6. Selected Label
Dropdown Pickers
1. Content: Will show the default option upon load
2. Caret: Must have caret to show that there are options.
3. Structure Width is depends on context.
4. Input Area
Dropdown Menus
Drop down menus allow users to quickly navigate to relevant pages. They are used to house options that will take users to a new page or modal. Options in the drop down menu can be text only, or include a line icon on the left. We stylize and standardize our drop down menus with CSS.
On desktop, drop down menus open on hover and close when the user moves the mouse out of range of the the drop down container. On mobile, they open on tab and close when the user taps outside of the container.
Dropdown Menu Animation
Dropdown for Services (Desktop Web Only)
For service discovery purposes, we've broken from our standard dropdown UI on desktop to create space for four columns of services. This menu exists on desktop web only, and breaks to mobile at a screen size of 1024px.
Headers
Services
Page Tabs
Page tabs are used to move between multiple pages of content.
1. Typography
2. Selection After the 3, the selection must stay in the middle.
3. Carets
Last updated
