Checkboxes & Radios
Checkboxes and Radios allow users to choose among presented options.
On this page:
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
idof the input matches theforof the label. - Set a checkbox or radio as the default choice by adding the
checkedattribute to it. - If a radio button choice is required, add the
requiredattribute on all radio buttons in a group.
Usage
See the Pen Checkboxes and Radios by LA Gov Design Team (@lagovdesignteam) on CodePen.