Radio Button

An input for selection control that often appears when users are asked to make a decision, or select from the options presented to them.

Design

Up to date

React

Up to date

Flutter

Up to date

Introduction

Use radio buttons when there is a list of multiple (from two to four) static options, and only one of these options can be selected at a time.

Use when there are fewer than 5 options: Users can quickly scan and compare all the options to choose one, instead of opening a dropdown.

To emphasize all options: Users can see every option and there is no recommended option.

Form

Can be used in tiles, data tables, modals, side panels, and in forms on full pages.

Settings

Used to change from one setting to another in a menu, page, or component. It can often act as a filtering mechanism.

Use Checkboxes when multiple options can be selected from a list or Toggle as the the preferred way to adjust settings.

Toggle

Checkbox