Components

Discover the individual widgets and building blocks of the UI.

Pickers

Use a picker when you want users to choose from two to three sets of interconnected values, such as the day, month, and year of an appointment, or the hour and minute for a timer. You can also use a picker to simplify a complex UI and reduce the number of steps in a workflow by allowing users to select multiple values in one step.

Don't use when

Users need to select from only one set of values. Use a drop-down list instead.

A date picker.

Drop-down lists

A drop-down list with one item selected.

Use a drop-down list when you want users to choose a single value from a larger set. Drop-down lists can make complex screens more compact and streamlined by collapsing many options into one element.

Don't use when

Users need to choose from two to three sets of interconnected values, such as the date and time of an appointment. Use a picker instead.

Best practices for drop-down lists

Use the value users are most likely to choose as the default value.

Don't use "Yes" and "No" as list values. Use a check box instead, and rephrase the option to describe the action.

Lists

A list presents content as list items, usually as an entry point to the next step in the navigation hierarchy. Lists can be displayed in a stacked or grid layout. To read more about lists, see Screen views.

A list item.

Best practice for lists

If you use images, populate the list as soon as possible so that list item text appears before all images are loaded.

Dividers and headers

Use dividers and headers to create a visual hierarchy to separate groups of items that belong together.

A header and a divider.

Best practices for dividers and headers

Use a divider as a simple visual barrier, to separate items in a container or list.

Use a header to separate sections in a list. A header contains one or two strings to label the section.

Buttons

Use a button to initiate an action.

A button in an unpressed state.
A button in a pressed state.

Best practices for buttons

Set the button that users are more likely to tap as the default button. Don't make a button for a destructive action the default.

Use single-word labels where possible.

Use verbs that describe the associated action, such as "Cancel," "Delete," or "Save."

Text fields and text areas

Use a text field to let users input a single line of text, such as a contact name or a password.

Use a text area to let users input several lines of text, such as a comment or a message.

A text field.

Learn more about text input in Keyboards and Forms.

Best practices for text fields and text areas

Include hint text in fields so that you need fewer labels. You might need a label if the field has a default value or if the field's description is too long as hint text.

Try to reduce the text users need to type. Let users choose items from pickers when you can. Try to store and display information that users enter so they don't have to type it repeatedly.

Use word prediction in text fields only with text that is likely in the dictionary, not in password, phone number, or name fields. The predictions might get in the way in these fields.

Activity and progress indicators

Use an activity and progress indicators to show users that your app is working and to show them the process and its progress.

Use an activity indicator when you want to show that your app is working, but you can't determine how long the process will take.

An activity indicator.

Use a progress indicator when you can determine how long the process will take.

A progress indicator.

Learn more about progress and activity indicators.

Best practices for activity and progress indicators

Always indicate progress when a process takes more than 3 seconds to complete.

If list content is being retrieved through the cloud (for example, third-party pictures), populate the list as content is received so users can interact with the content that's available.

Incorporate an inline solution if you can.

For progress indicators, show users the progress state (for example, "Uploading 5 of 7 pictures," "Uploading 2.4/4 Mb," or "4:24").

Check boxes, radio buttons, and toggle switches

Use check boxes, radio buttons, and toggle switches to let users select options.

Check boxes

Use check boxes when users can select multiple items or options.

A checked check box. An unchecked check box.

Radio buttons

Use radio buttons when users can choose among more than two mutually exclusive options.

A selected radio button. An unselected radio button.

Toggle switches

Use a toggle switch when users can choose between two options, such as On and Off. You can also use a toggle switch if you want to make a setting harder for users to change accidentally.

A toggle switch in the on position. A toggle switch in the off position.

Best practices for check boxes and radio buttons

Create a touch target area for the whole row and label. Check boxes and radio buttons have small visible areas.

Use positive labels where possible. For example, use Show instead of Hide.

Best practice for toggle switches

Use terms that identify the state of the option, not the action required to change the state. For example, "On" indicates the current state, but "Turn on" describes an action.

Sliders

Use a slider to control settings with a wide range or to show a preview of the change (for settings like volume level or screen brightness). You can also use a slider for fast forwarding and rewinding media files.

A slider.

Users drag the slider from left to right, or double-tap it to jump to predefined increments.

Best practice for sliders

Combine sliders with images or strings that explain the context, such as progress of a media file or the level of a filter that is being applied to a photo.



Got questions about leaving a comment? Get answers from our Disqus FAQ.

comments powered by Disqus