Radio Buttons

Rules

• Include matching for and id values unique to each label and radio button pair to associate the two
• Use radio buttons to present a set of options, where only one option can be selected at a time
• For sets with three or less short options the horizontal layout may be more appropriate
• For sets with longer labels or more than 3 options use the vertically stacked layout

Constraints

• When possible, keep the label short to more easily compare options when used within a set
• Only use a fieldset with legend to group associated inputs (e.g. multiple address inputs or credit card month/year inputs) or a set of radios or checkboxes. Some assistive tools will read the contents of the legend before each nested input to maintain context for a user. The above examples use a legend within the fieldset. The legend is styled like a label.

Principles

• Radio buttons allow a user to indicate their choice by selecting one option from a set

Accessibility

• Use for="IDReference" to associate the label with the corresponding input id="IDReference"

form-group Required	Use on the parent <div> or <fieldset> that surrounds the <label> and <input>
c-input Required	Use on the <label> that surrounds the <input>
c-radio Required	Used with .c-input
form-group-spacer Modifier	Use with .form-group to increase the space below the input
c-inputs-stacked Modifier	Custom checkboxes are inline-block by default, if you need them to stack use this on the parent <form> element or another wrapper around the checkbox set

---

• Last updated April 2, 2018
• Authorable - Yes
• Core - Radio Buttons