@spectrum-web-components/checkbox

Description

sp-checkbox allow users to select multiple items from a list of independent options, or to mark an individual option as selected.

Should I use a checkbox or a switch? Use a switch when activating something instead of selecting.

Installation

npm install @spectrum-web-components/checkbox

# or

yarn add @spectrum-web-components/checkbox

Example

<sp-checkbox>Web component</sp-checkbox>

Standard checkboxes

Standard checkboxes are the default style for checkboxes. The blue color provides a visual prominence that is optimal for forms, settings, lists or grids of assets, etc. where the checkboxes need to be noticed.

<sp-checkbox checked>Web component</sp-checkbox>

Quiet checkboxes

Quiet checkboxes are a secondary style for checkboxes. The gray color provides a less prominent style than the standard checkboxes. They are optimal for application panels where all visual elements are monochrome in order to direct focus to the content.

<sp-checkbox quiet>Web component</sp-checkbox>

States

In addition to the variant, sp-checkboxes have a number of attributes for controlling their visual state. All checkbox variants support the disabled, indeterminate, invalid attributes, which applies a disabled style to the checkbox, and also prevents clicks from activating it.

<div>checked:</div>
<sp-checkbox checked>Web component</sp-checkbox>

<div>indeterminate:</div>
<sp-checkbox indeterminate>Web component</sp-checkbox>

<div>invalid:</div>
<sp-checkbox invalid>Web component</sp-checkbox>

<div>disabled:</div>
<sp-checkbox disabled>Web component</sp-checkbox>

Handling events

Event handlers for clicks and other user actions can be registered on an sp-checkbox just as a normal <input type="checkbox"> element.

<sp-checkbox id="checkbox-example" onclick="javascript:alert('Click')">
    Web component
</sp-checkbox>

Accessibility

Checkboxes are accessible by default, rendered in HTML using the <input type="checkbox"> element. When the checkbox is set as indeterminate or invalid, the appropriate ARIA state attribute will automatically be applied.