Information entry

Standard input components let users enter, edit, and delete information quickly and accurately, improving the overall experience of your app.

Selection controls: choosing the right component

Checkboxes, radio buttons, and switches are the three selection controls. Choose based on how many options the user can select and whether the control acts immediately:

Buttons

A button initiates an immediate action, such as submitting a form.

Definition and principles

A button is the primary call to action on a page. Make it visually prominent so users notice it, and always provide feedback after a tap.

Buttons fall into three visual types:

• Primary button: One per page. Marks the main conversion action.

• Secondary button: Multiple allowed per page. Provides supplementary actions for the current context.

• Auxiliary button: Appears on the right side of a list item. Provides a direct action for that specific item.

In addition to visual type, assign a semantic role that reflects the button's consequence:

• Primary: The action users are most likely to choose. Responds to the Return key.

• Cancel: Cancels the current action without data loss.

• Destructive: Performs an action that may result in data loss. Do not assign the primary visual style to a destructive button—users sometimes tap a visually prominent button without reading it.

Visual style

Large button

Use a large button as the primary call to action on a page. Specifications:

• Center button text both vertically and horizontally.

• The height is fixed at 94 px (47 pt). The border radius is 10 px (5 pt).

  Note

  A page can have only one primary button.

Small button

Use small buttons for actions on a specific item or option within a page. They can appear multiple times. Specifications:

• Center button text both vertically and horizontally.

• The height is fixed at 60 px (30 pt). The minimum width is 112 px (56 pt). The border thickness is 2 px (1 pt). The border radius is 6 px (3 pt).

• The padding between text and border is 30 px (15 pt). If the text does not fit, extend the button width.

Examples

Buttons are meaningful only in the context of page content.

Primary button:

Auxiliary button:

Checkboxes

Checkboxes let users select multiple items at the same time.

Definition and principles

Use checkboxes in lists where users can select multiple items for a batch operation. After selecting, users can edit the selected items together. A checkbox has two states: selected and unselected.

Use a radio button instead when users must pick exactly one option. Use a switch instead when a single setting takes effect immediately.

Text fields

A text field is the simplest input component. It accepts a single line of data entered via a keyboard, picker, or other component.

Definition and principles

A text field consists of three areas:

• Label area: Identifies the field. Limit to four characters.

• Input area: Where users type. Include placeholder text to indicate the expected input.

• Auxiliary action area: Optional. Contains input-assistance buttons or a link to detailed instructions.

Single-line text fields typically have a character limit, often set to 15 characters. Restrict input to specific types—Chinese characters, English letters, numbers, or email addresses—when appropriate.

Show the right keyboard type when a user activates a field: text, English, numeric, or email. Matching the keyboard to the input type reduces errors and speeds up entry.

Mask sensitive input such as passwords or phone numbers.

Best practices:

• Show placeholder text (such as "Email" or "Search keywords") when the field is empty. Because placeholder text disappears when the user starts typing, pair it with a persistent label when the field purpose is not obvious.

• Restrict the input type when the expected data format is known (for example, numeric-only for phone numbers).

• Display a clear button at the end of the field so users can erase their input without repeatedly tapping Delete.

Visual style

Combine labels, icons, and auxiliary input buttons to create different field styles for different contexts.

Pickers

A picker presents a preset dataset and lets users complete an input or setting by making a selection.

Definition and principles

A picker opens when the user taps an input field. A semi-transparent overlay covers the page, focusing attention on the picker. Tapping outside the picker or a Cancel button dismisses it.

Order picker data logically to match user expectations. Because a picker may not display all options at once, a logical order helps users find what they need by scrolling.

A picker supports up to four columns for combined selections. The text in the longest column must not exceed the column width limit.

Date pickers

A date picker lets users quickly select a point in time. Configure it to include any combination of year, month, day, hour, minute, and second.

Radio buttons

A radio button lets a user select exactly one option from a set.

Definition and principles

Radio buttons appear on the right side of a list. A check mark indicates the currently selected option.

Use a checkbox instead when users can select multiple items. Use a switch instead when the option takes effect immediately without a submit step.

Search bars

A search bar lets users quickly find content within a large dataset.

Definition and principles

Place the search bar below the navigation bar. Tapping it activates the search bar and shows the system keyboard. Tap Cancel to exit.

Show placeholder text (such as "Keywords") in the input area by default to guide users. Below the search bar, provide shortcut labels such as recent searches—tapping a label fills the search bar without typing.

Switch

A switch represents two mutually exclusive states—on and off.

Definition and principles

Use switches within lists to let users toggle a standalone setting on or off immediately, without a submit step.

Always pair a switch with an inline label that describes what the control does when it is on. Keep the label short and direct. Do not embed text inside the switch itself—the font size would be too small to read.

Use a checkbox or radio button instead when the user's selection applies only after they submit a form.