Skip to main content Accessibility Feedback
Skip to Documentation Content

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>

Grouping Checkboxes

Use the <fieldset> element to label a group of checkboxes.