Components

Pickers

Use a picker when you want users to choose from 2-3 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 only need to select from one set of values. Use a drop-down list instead.

Drop-down lists

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 2-3 sets of interconnected values, such as the date and time of an appointment. Use a picker instead.

Best practices

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

For the default value, use the value users are most likely to choose.

List items

A list item presents content in a list, 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.

Best practice

If you use images, start populating the list as soon as possible so that items can appear before all images have loaded.

Dividers and headers

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

Best practices

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.

Best practices

Make the default button the one that users are more likely to use but 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).

Learn more about text input in keyboards and forms.

Best practices

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 for 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.

Only use word prediction in text fields with text that is likely to be 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 it will take.

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

Learn more about progress and activity indicators.

Best practices

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/4Mb," or "4:24").

Check boxes, radio buttons, and toggle switches

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

Check boxes

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

Radio buttons

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

This image shows a pressed radio button.

Toggle switches

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

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, and not the action required to change the state. For example, "On" indicates the current state, while "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 playing back media files.

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

Best practice

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