0.27.0 • Published 2 years ago

@material/mwc-checkbox v0.27.0

Weekly downloads
5,965
License
Apache-2.0
Repository
github
Last release
2 years ago

<mwc-checkbox> Published on npm

IMPORTANT: The Material Web Components are a work in progress and subject to major changes until 1.0 release.

Checkboxes allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off.

Material Design Guidelines: Checkboxes

Demo

Installation

npm install @material/mwc-checkbox

NOTE: The Material Web Components are distributed as ES2017 JavaScript Modules, and use the Custom Elements API. They are compatible with all modern browsers including Chrome, Firefox, Safari, Edge, and IE11, but an additional tooling step is required to resolve bare module specifiers, as well as transpilation and polyfills for IE11. See here for detailed instructions.

Example usage

Standard

<mwc-checkbox checked></mwc-checkbox>

<script type="module">
  import '@material/mwc-checkbox/mwc-checkbox.js';

  const checkbox = document.body.querySelector('mwc-checkbox')
  checkbox.addEventListener('change', () => {
    console.log(`checkbox changed to ${checkbox.checked}`);
  });
</script>

Standard, disabled

<div>
  <mwc-checkbox></mwc-checkbox>
  <mwc-checkbox checked></mwc-checkbox>
  <mwc-checkbox indeterminate></mwc-checkbox>
</div>

<div>
  <mwc-checkbox disabled></mwc-checkbox>
  <mwc-checkbox disabled checked></mwc-checkbox>
  <mwc-checkbox disabled indeterminate></mwc-checkbox>
</div>

Styled standard, disabled

<style>
  body {
    background-color: #363636;

    --mdc-theme-secondary: #ff2929;
    --mdc-checkbox-unchecked-color: white;
    /* Required for unchecked focus ripple */
    --mdc-theme-on-surface: white;
    --mdc-checkbox-disabled-color: #adadad;
    --mdc-checkbox-ink-color: #363636;
  }
</style>

<div>
  <mwc-checkbox></mwc-checkbox>
  <mwc-checkbox checked></mwc-checkbox>
  <mwc-checkbox indeterminate></mwc-checkbox>
</div>

<div>
  <mwc-checkbox disabled></mwc-checkbox>
  <mwc-checkbox disabled checked></mwc-checkbox>
  <mwc-checkbox disabled indeterminate></mwc-checkbox>
</div>

With Form Field

Most applications should use <mwc-formfield> to associate an interactive label with the checkbox.

<style>
  mwc-formfield {
    display: block;
  }
  .child {
    margin-left: 20px;
  }
</style>

<mwc-formfield label="Additions">
  <mwc-checkbox indeterminate></mwc-checkbox>
</mwc-formfield>

<mwc-formfield label="Pickles">
  <mwc-checkbox class="child"></mwc-checkbox>
</mwc-formfield>

<mwc-formfield label="Tomato">
  <mwc-checkbox class="child" checked></mwc-checkbox>
</mwc-formfield>

<script type="module">
  import '@material/mwc-checkbox/mwc-checkbox.js';
  import '@material/mwc-formfield/mwc-formfield.js';
</script>

API

Properties/Attributes

NameTypeDefaultDescription
checkedbooleanfalseWhether the checkbox is checked.
indeterminatebooleanfalseWhen a checkbox is the parent of a set of child checkboxes, the indeterminate state is used on the parent to indicate that some but not all of its children are checked.
disabledbooleanfalseWhen true, the checkbox cannot be interacted with, and renders in muted colors.
valuestring''The value that will be included if the checkbox is submitted in a form.
reducedTouchTargetbooleanfalseWhen true, the checkbox remove padding for touchscreens and increase density. Note, the checkbox will no longer meet accessibility guidelines for touch.

Methods

None

Events

Event NameTargetDetailDescription
changemwc-checkbox{}Fired when the user modifies the checkbox checked or indeterminate states from an input device interaction. Note that, like native <input>, the change event is not fired when the checked or indeterminate properties are set from JavaScript.

CSS Custom Properties

NameDefaultDescription
--mdc-checkbox-ink-colornpm.io #fffColor of mark inside a checked or indeterminate checkbox (enabled or disabled).
--mdc-checkbox-unchecked-colornpm.io rgba(0, 0, 0, 0.54)Color of the unchecked box.
--mdc-checkbox-disabled-colornpm.io rgba(0, 0, 0, 0.38)Color of the checkbox box and fill when disabled.

Global Custom Properties

This component exposes the following global theming custom properties.

NameDescription
--mdc-theme-secondaryBackground color when the checkbox is checked or indeterminate, and the base color of the ripple effect and focus halo.
--mdc-theme-on-surfaceColor of mark inside a checked or indeterminate checkbox (enabled or disabled).

Additional references

@material/mwc-listzagenzagen-productionplaytwo-core-cms-sectionsconectatesimplr-components@netzoio/web-componentsopenstamanager@everything-registry/sub-chunk-584@erixhens/annotator@vonage/vwc-checkbox@web-mjs/material-components@web-mjs/material-web-components@things-factory/reference-app@totvs/tds-monitor-frontendfhir-active-statusfhir-decease-status@backlight-dev/aodocs.aodocs-design-systemdotcms-uidaosmindholochain-mutual-creditholochain-playgroundholochain-profilesholochain-social-triangulationholochain-file-storage@equinor/fusion-wc-checkbox@esui/material-components@finastra/checkboxmaterial-components-elm-js-imports@formsey/fields-materialmwc-bundle@dhruval/dk-checkbox@dhruval/dk-form-fieldcloudbees-casc-server-plugin-ui@cortexcloud/cortex-ui-legacyhomeassistant-frontend-racelandcorgy-frontendcortex-ui-legacy@boluabraham/fhir-human-language@boluabraham/fhir-active-status@boluabraham/fhir-decease-status@bluetensor/annotator@dreamworld/dw-checkbox@dotcms/dotcms-uijupyter_pixano@infinitebrahmanuniverse/nolb-_mate@floreysoft/formsey-fields-material@hass-ada/frontend-lite@iooxa/components@iooxa/ink-basic@lordoftheflies/plutonium-styles@jrg-material/material@jrg/ubuntu-ui@maicol07/mwa-data-table@leavittsoftware/leavittbook@leavittsoftware/titanium-data-tablevve-breakoutrestu-garzon-virtualxtal-cascade@pixano/core@openenergytools/scl-wizarding@openscd/oscd-filtered-list@pie-framework/pie-toolsruhil-uiscoped-material-componentstasmota-esp-web-toolsswag-tag-mwcyew-material-scripts@takeramagan/hotel-library
0.27.0

2 years ago

0.26.1

2 years ago

0.26.0

2 years ago

0.25.3

3 years ago

0.25.2

3 years ago

0.25.1

3 years ago

0.25.0

3 years ago

0.23.0

3 years ago

0.22.1

3 years ago

0.22.0

3 years ago

0.21.0

3 years ago

0.20.0

3 years ago

0.19.1

4 years ago

0.19.0

4 years ago

0.18.0

4 years ago

0.17.2

4 years ago

0.17.0

4 years ago

0.16.1

4 years ago

0.15.0

4 years ago

0.14.1

4 years ago

0.14.0

4 years ago

0.13.0

4 years ago

0.12.0

4 years ago

0.11.1

4 years ago

0.11.0

4 years ago

0.10.0

5 years ago

0.9.1

5 years ago

0.9.0

5 years ago

0.8.0

5 years ago

0.7.1

5 years ago

0.7.0

5 years ago

0.6.0

5 years ago

0.5.0

5 years ago

0.4.0

5 years ago

0.3.6

5 years ago

0.3.5

5 years ago

0.3.4

5 years ago

0.3.3

5 years ago

0.3.2

5 years ago

0.3.1

6 years ago

0.3.0

6 years ago

0.2.1

6 years ago

0.2.0

6 years ago

0.1.2

6 years ago

0.1.1

6 years ago

0.1.0

6 years ago