<dy-checkbox>
A checkbox component that allows users to select one or multiple options. It supports three states: checked, unchecked, and indeterminate, and can be configured to be disabled.
Example
Loading...
<dy-checkbox
.indeterminate=${true}
.checked=${false}
@change=${(evt) => {evt.target.indeterminate = false;evt.target.checked = evt.detail;}}> Checkbox Label </dy-checkbox> <dy-checkbox .disabled=${true} .checked=${true}> Checkbox Label </dy-checkbox>
Loading...
<dy-checkbox-group
.orientation=${"vertical"}
.options=${ [ {"label":"Option 1"}, {"label":"Option 2"}, {"label":"Option 3"} ] }
.value=${["Option 1"]}
@change=${(evt) => evt.currentTarget.value = evt.detail}></dy-checkbox-group>
<dy-checkbox> API
DuoyunCheckboxElement
Extends TapCheckboxElement
TapCheckboxElement
Shadow DOM; Extends GemElement
TapCheckboxElement Instance Properties
| Property(Attribute) | Reactive | Type |
|---|---|---|
checked(checked) |
Yes | boolean |
indeterminate(indeterminate) |
Yes | boolean |
disabled(disabled) |
Yes | boolean |
change |
Emitter<boolean> |
|
value(value) |
Yes | string |
TapCheckboxElement Other
| Type | Value |
|---|---|
| Event | change |
| Slot | unnamed |
<dy-checkbox-group> API
DuoyunCheckboxGroupElement
Extends TapCheckboxGroupElement
DuoyunCheckboxGroupElement Other
| Type | Value |
|---|---|
| CSS State | tap-list |
TapCheckboxGroupElement
Extends GemElement
TapCheckboxGroupElement Instance Properties
| Property(Attribute) | Reactive | Type |
|---|---|---|
orientation(orientation) |
Yes | 'horizontal' | 'vertical' |
heading(heading) |
Yes | string |
disabled(disabled) |
Yes | boolean |
change |
Emitter<any[]> |
|
value |
Yes | any[] |
options |
Yes | Option[] |
TapCheckboxGroupElement Other
| Type | Value |
|---|---|
| Event | change |
| CSS State | tap-list |