Checkbox

<label>
  <md-gb-checkbox></md-gb-checkbox>
  Remember me
</label>

Install with shadcn/ui: npx shadcn@latest add https://material-web.dev/3.0/r/md-checkbox.json (setup)

• Select from a set. Use checkboxes when people can pick any number of options from a list, or to turn one option on or off.
• Label every checkbox. The label is the adjacent text, and it should say what checking the box does.
• Use a parent for a group. A parent checkbox shows an indeterminate state when only some of its children are checked.
• Don't apply density by default. Let people opt in to a denser layout.

A checkbox is one element. A <label> next to it, or around it, provides the text.

<label>
  <md-gb-checkbox></md-gb-checkbox>
  Send me updates
</label>

Add checked for a selected checkbox. Add indeterminate for a parent whose children are partly selected.

<label>
  <md-gb-checkbox checked></md-gb-checkbox>
  Email
</label>
<label>
  <md-gb-checkbox indeterminate></md-gb-checkbox>
  All notifications
</label>

Add error to mark a checkbox as invalid. With required, it must be checked to submit a form.

<label>
  <md-gb-checkbox required error></md-gb-checkbox>
  I accept the terms
</label>

A disabled checkbox can't be changed.

<label>
  <md-gb-checkbox disabled></md-gb-checkbox>
  Unavailable option
</label>

Set density from 0 (default) to -3 to shrink the checkbox. The touch target stays 48px.

<label>
  <md-gb-checkbox density="-2"></md-gb-checkbox>
  Compact option
</label>

Call linkParentCheckbox(parent, children) from checkbox-group.js. Checking the parent checks every child, and a partial selection makes the parent indeterminate.

<label>
  <md-gb-checkbox id="all"></md-gb-checkbox>
  All notifications
</label>
<label>
  <md-gb-checkbox class="channel" checked></md-gb-checkbox>
  Email
</label>
<label>
  <md-gb-checkbox class="channel"></md-gb-checkbox>
  Push
</label>

import {linkParentCheckbox} from '@material/web/labs/gb/components/checkbox/checkbox-group.js';

const parent = document.querySelector('md-gb-checkbox#all')!;
const children = [...document.querySelectorAll('md-gb-checkbox.channel')];
linkParentCheckbox(parent, children);

• The adjacent <label> text is the checkbox's accessible name. Use aria-label when there is no visible label or it needs more detail.
• Space toggles the focused checkbox, and Tab moves between checkboxes.
• A checkbox exposes its checked, unchecked or mixed state.

<md-gb-checkbox aria-label="Select all messages"></md-gb-checkbox>

A Material Design component.