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.
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.
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.
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.