Checkbox
<sc-checkbox></sc-checkbox>
This component lets the user select one option from a group of many.
- Preview
- Code
<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>
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. |