Radio & Checkbox
Let users select from fixed options with radio and checkbox elements.
Checkbox
The [type="checkbox"] attribute turns an <input> into a checkbox.
<label>
<input type="checkbox" name="awesome">
I love Pixar movies
</label>Include the [checked] attribute to have the checkbox selected by default.
<label>
<input
type="checkbox"
name="awesome"
checked
>
I love Pixar movies
</label>Radio
The [type="radio"] attribute turns an <input> into a radio button.
Each item in a radio group should have the same [name] and a unique [value]. Selecting a radio button will deselect any other radio button with the same [name].
<label>
<input type="radio" name="movie" value="up">
Up!
</label>
<label>
<input type="radio" name="movie" value="wall-e">
WALL-E
</label>
<label>
<input type="radio" name="movie" value="toy-story">
Toy Story
</label>Include the [checked] attribute to have a radio button selected by default.
If multiple radio buttons with the same [name] have the [checked] attribute, the last element in the DOM with the attribute will be selected.
<label>
<input type="radio" name="movie" value="up">
Up!
</label>
<label>
<input type="radio" name="movie" value="wall-e" checked>
WALL-E
</label>
<label>
<input type="radio" name="movie" value="toy-story">
Toy Story
</label>Grouping Inputs
Use the <fieldset> element to group a set of related radio buttons or checkboxes together. Include a <legend> element inside it to label the set of inputs.
<fieldset>
<legend>What's your favorite Pixar movie?</legend>
<label>
<input type="radio" name="movie" value="up">
Up!
</label>
<label>
<input type="radio" name="movie" value="wall-e">
WALL-E
</label>
<label>
<input type="radio" name="movie" value="toy-story">
Toy Story
</label>
</fieldset>Checkbox or Radio Button?
- Use a radio button when…
-
- You have multiple options, and
- A user should only be able to choose one of them.
- Use a checkbox when…
-
- A user can choose multiple options, or
- A value requires a boolean yes/no or true/false response.