Radio Buttons
Let users select one option from a list with radio buttons.
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 for="up">
<input type="radio" id="up" name="movie" value="up">
Up!
</label>
<label for="wall-e">
<input type="radio" id="wall-e" name="movie" value="wall-e">
WALL-E
</label>
<label for="toy-story">
<input type="radio" id="toy-story" name="movie" value="toy-story">
Toy Story
</label>Selected by Default
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 for="up">
<input type="radio" id="up" name="movie" value="up">
Up!
</label>
<label for="wall-e">
<input type="radio" id="wall-e" name="movie" value="wall-e" checked>
WALL-E
</label>
<label for="toy-story">
<input type="radio" id="toy-story" name="movie" value="toy-story">
Toy Story
</label>Disabled
Use the [disabled] attribute to prevent a radio button from being checked. Kelp also lightens the color as a visual indicator.
<label for="up">
<input
type="radio"
id="up"
name="movie"
value="up"
disabled
>
Up!
</label>
<label for="wall-e">
<input
type="radio"
id="wall-e"
name="movie"
value="wall-e"
checked
disabled
>
WALL-E
</label>Checked Color
Radio buttons use the --color-checked CSS variable for their background and border color when checked. These colors are shared with checkboxes.
@layer kelp.theme {
:root,
.light {
--color-checked: var(--color-blue-50);
}
.dark {
--color-checked: var(--color-blue-60);
}
}Grouping Radio Buttons
Use the <fieldset> element to label a group of radio buttons.