Skip to main content
Version: v3

Selection and status indicators

Selection and status indicators allow the user to choose from a set of predetermined options.

Radio buttons

Radio buttons (required) allow the user to select one out of several options.

Design

Visual specifications

  • Radio buttons have four states:
    ① Selected
    ② Unselected
    ③ Selected (disabled) The item is selected, but the user cannot manually switch between the selected and unselected states.
    ④ Unselected (disabled) The item is not selected, but the user cannot manually switch between the selected and unselected states.

Design

Radio boxes are placed uniformly on the right side of the list

Design

Checkboxes

Checkboxes (optional) allow the user to make multiple selections from provided options.

Design

Visual specifications

  • Checkboxes have four states:
    ① Selected
    ② Unselected
    ③ Selected (disabled) The item is selected, but the user cannot manually switch between the selected and unselected states.
    ④ Unselected (disabled) The item is not selected, but the user cannot manually switch between the selected and unselected states.

Design

  • Checkboxes are placed uniformly on the right side of the list

Design

Status indicators

A status indicator is used to indicate the completion of an operation, such as indicating a completed to-do item.

Design

Visual specifications

Status indicators have two states: ① Completed ② Uncompleted

Design