Checkbox
Let users select one or more items from a list of fixed options with checkbox elements.
Checkbox
The [type="checkbox"] attribute turns an <input> into a checkbox.
<label for="pixar">
<input type="checkbox" id="pixar" name="awesome">
I love Pixar movies
</label>Checked by Default
Include the [checked] attribute to have the checkbox selected by default.
<label for="pixar">
<input
type="checkbox"
id="pixar"
name="awesome"
checked
>
I love Pixar movies
</label>Disabled
Use the [disabled] attribute to prevent a checkbox from being checked or unchecked. Kelp also lightens the color as a visual indicator.
<label for="pixar">
<input
type="checkbox"
id="pixar"
name="awesome"
checked
disabled
>
I love Pixar movies
</label>
<label for="dreamworks">
<input
type="checkbox"
id="dreamworks"
name="awesome"
checked
disabled
>
I love Pixar movies
</label>Checked Color
Checkboxes use the --color-checked CSS variable for their background and border color when checked. They also use the --color-checked-icon CSS variable for the checked icon color.
These colors are shared with radio buttons.
@layer kelp.theme {
:root,
.light {
--color-checked: var(--color-blue-50);
--color-checked-icon: white;
}
.dark {
--color-checked: var(--color-blue-60);
}
}Grouping Checkboxes
Use the <fieldset> element to label a group of checkboxes.