Switch to M&T
Overview

Radio

Radios are a type of form input that allows the user to select a single option from a given list. To allow the user to select multiple options, use the Checkbox component. Radio buttons can be used with or without a container.

Variants

Radio buttons without container

Use this radio button to achieve a cleaner layout. In addition to the default state, this variant has hover, focus, select, error and disable states. Each state affects the radio input. Some states also affect the text label.

Radio with Container

Use this variant to distinguish a list of options in a busier layout. Options are individually delineated and stacked in a stroked container. In addition to the default state, this variant has hover, focus, select, error and disable states. Each state affects the radio input. Some states also affect the container and text label.


Microcopy

Text labels can be full sentences or fragments, but stay consistent within the same list. If fragments, all options should use the same part of speech (e.g. all nouns or all verbs) rather than mixing. Use sentence case with no end punctuation, unless the text is a question.