Checkboxes & Radios

Checkboxes and Radios allow users to choose among presented options.

Best Practices

Please read Label Guidance first.
When possible, present them in a vertical list.
If the user can select one or more options, use Checkboxes.
If only one item can be selected, use Radios.
If space is limited, consider using a Select.
If the user needs to activate or deactivate something, use a Switch instead.
Ensure the id of the input matches the for of the label.
Set a checkbox or radio as the default choice by adding the checked attribute to it.
If a radio button choice is required, add the required attribute on all radio buttons in a group.

See the Pen inputs by LA Gov Design Team (@lagovdesignteam) on CodePen.