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.
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.
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.
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.
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.
Use a button to initiate an action.
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.
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.
Use a progress indicator when you can determine how long the process will take.
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.
Use check boxes when users can select multiple items or options.
Use radio buttons when users can choose among more than two mutually exclusive options.
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.
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.
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.
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.