Checkbox

<sc-checkbox></sc-checkbox>

This component lets the user select one option from a group of many.

Preview

<sc-checkbox value="1" name="test" checked>
	Option 1
</sc-checkbox>
<sc-checkbox value="2" name="test">
	Option 2
</sc-checkbox>
<sc-checkbox value="3" name="test" disabled>
	Option 3
</sc-checkbox>

Code

Option 1
Option 2
Option 3

Component Codex

Properties

Property	Description	Type	Default
checked	Draws the checkbox in a checked state.	boolean	false
disabled	Disables the checkbox.	boolean	false
edit	Makes this edit and not editable.	boolean	false
indeterminate	Draws the checkbox in an indeterminate state.	boolean	false
invalid	This will be true when the control is in an invalid state. Validity is determined by the `required` prop.	boolean	false
name	The checkbox's name attribute.	string
required	Makes the checkbox a required field.	boolean	false
value	The checkbox's value attribute.	string

Events

Event	Description	Type
scBlur	Emitted when the control loses focus.	CustomEvent<void>
scChange	Emitted when the control's checked state changes.	CustomEvent<void>
scFocus	Emitted when the control gains focus.	CustomEvent<void>

Methods

reportValidity() => Promise<boolean>

Checks for validity and shows the browser's validation message if the control is invalid.

triggerBlur() => Promise<void>

Removes focus from the checkbox.

triggerClick() => Promise<void>

Simulates a click on the checkbox.

triggerFocus(options?: FocusOptions) => Promise<void>

Sets focus on the checkbox.

Shadow Parts

Part	Description
base	The elements base wrapper.
checked-icon	Checked icon.
control	The control wrapper.
indeterminate-icon	Indeterminate icon.
label	The label.