mirror of https://github.com/material-components/material-web.git synced 2026-03-09 00:09:23 +08:00

Elizabeth Mitchell a0efe1e78f docs: add doctype tags

PiperOrigin-RevId: 527386744

2023-04-26 15:10:19 -07:00

3.0 KiB

Raw Blame History

Checkbox

Checkboxes allow users to select one or more items from a set. Checkboxes can turn an option on or off.

There's one type of checkbox in Material. Use this selection control when the user needs to select one or more options from a list.

Design article
API Documentation (coming soon)
Source code

Usage

Checkboxes may be standalone, pre-checked, or indeterminate.

<md-checkbox></md-checkbox>
<md-checkbox checked></md-checkbox>
<md-checkbox indeterminate></md-checkbox>

Label

Associate a label with a checkbox using the <label> element.

<label>
  <md-checkbox></md-checkbox>
  Checkbox one
</label>

<md-checkbox id="checkbox-two"></md-checkbox>
<label for="checkbox-two">Checkbox two</label>

Accessibility

Add an aria-label attribute to checkboxes without labels or checkboxes whose labels need to be more descriptive.

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

<label>
  <md-checkbox aria-label="Agree to terms and conditions"></md-checkbox>
  Agree
</label>

Theming

Checkbox supports Material theming and can be customized in terms of color and shape.

Tokens

Token	Default value
`--md-checkbox-unselected-outline-color`	`--md-sys-color-on-surface-variant`
`--md-checkbox-selected-container-color`	`--md-sys-color-primary`
`--md-checkbox-selected-icon-color`	`--md-sys-color-on-primary`
`--md-checkbox-container-shape`	`2px`

All tokens

Example

<style>
:root {
  --md-sys-color-primary: #006A6A;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-on-surface-variant: #3F4948;
  --md-checkbox-container-shape: 0px;
}
</style>

<md-checkbox></md-checkbox>
<md-checkbox checked></md-checkbox>

3.0 KiB Raw Blame History