mirror of
https://github.com/material-components/material-web.git
synced 2026-03-09 00:09:23 +08:00
9025af316a
BREAKING CHANGE: checkbox container-width/height tokens have been renamed to container-size PiperOrigin-RevId: 509559497
103 lines
2.9 KiB
Markdown
103 lines
2.9 KiB
Markdown
# Checkbox
|
|
|
|
<!--*
|
|
# Document freshness: For more information, see go/fresh-source.
|
|
freshness: { owner: 'lizmitchell' reviewed: '2023-01-25' }
|
|
*-->
|
|
|
|
<!-- go/md-checkbox -->
|
|
|
|
<!-- [TOC] -->
|
|
|
|
[Checkboxes](https://m3.material.io/components/checkbox)<!-- {.external} --> 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](https://m3.material.io/components/checkbox) <!-- {.external} -->
|
|
* API Documentation (*coming soon*)
|
|
* [Source code](https://github.com/material-components/material-web/tree/master/checkbox)
|
|
<!-- {.external} -->
|
|
|
|
## Usage
|
|
|
|
Checkboxes may be standalone, pre-checked, or indeterminate.
|
|
|
|
|
|
|
|
```html
|
|
<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.
|
|
|
|
|
|
|
|
```html
|
|
<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`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label)<!-- {.external} -->
|
|
attribute to checkboxes without labels or checkboxes whose labels need to be
|
|
more descriptive.
|
|
|
|
```html
|
|
<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](../theming.md) 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](https://github.com/material-components/material-web/blob/master/tokens/v0_160/_md-comp-checkbox.scss)
|
|
<!-- {.external} -->
|
|
|
|
### Example
|
|
|
|
|
|
|
|
```html
|
|
<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>
|
|
```
|