Logomark for Development Bank of Singapore (DBS), a bright red shape resembling a flowerDBS Digital
Design System

Radio

Radio buttons and radio group are used for single selection from a group of options.

What’s here

  1. Types
  2. Usage
  3. States (radio buttons)
  4. States (radio group)

Resources

  • Radio on Figma
  • Radio API (coming soon)

Types

Media is restricted, please login to view

Usage

Radio buttons are used for single selection. Radio buttons must always come in groups of two or more. Each radio button should always come with a label attached to it.

Radio buttons

Radio buttons must always come in groups of two or more. Each radio button should always come with a label attached to it.

Media is restricted, please login to view

If there is an error in the grouped selection, you may use an error message to let the user know the action they must take. Once the action is complete the error message can disappear.

Media is restricted, please login to view

Sub-items

If a selection calls for more options to be rendered, the interface and list style is slightly different allowing for the sections to be separated by a visible line.

Media is restricted, please login to view

If multiple selections will have their own sub-items, the interface and list style is slightly different allowing for the sections to be separated by a visible line.

Media is restricted, please login to view

Sub-details

In some cases, it may be required to show sub-details. We recommend showing details up front rather than upon selection.

Media is restricted, please login to view

Radio group

Use for single selection when there are few options with short labels.

Media is restricted, please login to view

States (radio buttons)

Media is restricted, please login to view

States (radio group)

Media is restricted, please login to view
Loading...