# Checkbox **This documentation is fully rendered on the [Material Web catalog](https://material-web.dev/components/checkbox/).** [Checkboxes](https://m3.material.io/components/checkbox) 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) * [API Documentation](#api) * [Source code](https://github.com/material-components/material-web/tree/main/checkbox) ## Usage Checkboxes may be standalone, pre-checked, or indeterminate.  ```html ``` ### Label Associate a label with a checkbox using the `` element.  ```html Checkbox one Checkbox two ``` ## Accessibility Add an [`aria-label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label) attribute to checkboxes without labels or checkboxes whose labels need to be more descriptive. ```html Agree ``` > Note: checkboxes are not automatically labelled by `` elements and > always need an `aria-label`. See b/294081528. ## Theming Checkbox supports [Material theming](../theming/README.md) and can be customized in terms of color and shape. ### Tokens Token | Default value ---------------------------------------- | ----------------------------------- `--md-checkbox-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/main/tokens/_md-comp-checkbox.scss) ### Example  ```html ``` ## API ### MdCheckbox <md-checkbox> #### Properties | Property | Attribute | Type | Default | Description | | --- | --- | --- | --- | --- | | `checked` | `checked` | `boolean` | `false` | Whether or not the checkbox is selected. | | `indeterminate` | `indeterminate` | `boolean` | `false` | Whether or not the checkbox is indeterminate.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes | | `required` | `required` | `boolean` | `false` | When true, require the checkbox to be selected when participating in form submission.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#validation | | `value` | `value` | `string` | `'on'` | The value of the checkbox that is submitted with a form when selected.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#value | | `disabled` | | `boolean` | `undefined` | | | `name` | | `string` | `undefined` | | #### Methods | Method | Parameters | Returns | Description | | --- | --- | --- | --- | | `formResetCallback` | _None_ | `void` | | | `formStateRestoreCallback` | `state` | `void` | | #### Events | Event | Type | [Bubbles](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles) | [Composed](https://developer.mozilla.org/en-US/docs/Web/API/Event/composed) | Description | | --- | --- | --- | --- | --- | | `change` | `Event` | Yes | No | The native `change` event on [``](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event) | | `input` | `InputEvent` | Yes | Yes | The native `input` event on [``](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event) |