A radio button is a form control that allows a single selection from a group of choices.

The purpose of a radio button is to collect form data. Therefore, radio buttons should always be used in conjunction with a form, label and submit button.

The radio is decoupled from its text label to allow more flexibility in terms of layout. How and where you provide this label is up to you, but do not forget it!

Default Radio

Use the radio base class to create a styled radio.

NOTE: Skin uses SVG to give a custom radio button appearance. This SVG is hidden by default to prevent it from appearing alongside the browser default radio button in a non-CSS state.

Large Radio

For a larger radio button, use the radio--large modifier plus the #icon-radio-unchecked-24 and #icon-radio-checked-24 icons.

Disabled Radio

Use the disabled attribute to disable any radio input.

Grouped Radio

A group of radios enforces single-select (unlike a group of checkboxes which allows multi-select).

A fieldset and legend are required in order to create the correct grouping semantics. Note that the Skin global module removes the default fieldset border and padding.

The following example uses the field module for simple layout of radio button fields and labels.

TIP : For large radios, wrap each label and control inside of a field__group element to maintain vertical alignment.

To stack radio buttons vertically instead of side-by-side, simply replace the span wrapper with a div wrapper.