sp-checkbox

Since: UXP 4.1, PS 22.0.0

Renders a checkbox with associated label.

See:

• https://spectrum.adobe.com/page/checkbox/
• https://opensource.adobe.com/spectrum-web-components/components/checkbox

Example

<sp-checkbox>Include all metadata</sp-checkbox>
CopyCopied to your clipboard
<sp-checkbox>Include all metadata</sp-checkbox>

States#

There are several states that are supported.

Checked#

<sp-checkbox checked>Checked</sp-checkbox>
CopyCopied to your clipboard
<sp-checkbox checked>Checked</sp-checkbox>

Indeterminate#

<sp-checkbox indeterminate>Indeterminate</sp-checkbox>
CopyCopied to your clipboard
<sp-checkbox indeterminate>Indeterminate</sp-checkbox>

Disabled#

<sp-checkbox disabled>Disabled</sp-checkbox>
CopyCopied to your clipboard
<sp-checkbox disabled>Disabled</sp-checkbox>

Invalid#

<sp-checkbox invalid>Invalid</sp-checkbox>
CopyCopied to your clipboard
<sp-checkbox invalid>Invalid</sp-checkbox>

Responding to events#

You can respond to changes in the checkbox using the change or input events.

document.querySelector(".yourCheckbox").addEventListener("change", evt => {
    console.log(`Is the checkbox checked: ${evt.target.checked}`);
})
CopyCopied to your clipboard
1document.querySelector(".yourCheckbox").addEventListener("change", evt => {
2    console.log(`Is the checkbox checked: ${evt.target.checked}`);
3})