Switch to WilmingtonRadio
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.
Variants
The radio button component includes a text label for each option and a transparent container outlined in gray that holds the full list of selectable options.
Use this variant when you need to include secondary or supplementary information to give a user further context in order to make a choice.
Optionally, the last button in a radio list may contain a text input. There may only be one radio of this type in a list and it must appear after all other options to be accessible. The text input remains disabled unless the corresponding radio option is selected.
States
In addition to the default state, every radio button option has a hover state, a focus state, and a selected state. The error state, however, affects the entire list container.
Design Environment
A radio group in the error state must be used with an input error component to guide the user in correcting the error.
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.
The label radios with nested inputs should be 'Other - Please specify'. This will give users who rely on a screenreader an audible cue that there is an input associated with the radio that must be filled out.