BwCheckbox | bw-checkbox
Overview
The checkbox component is a form control that represent the absence or presence of a condition.
Usage
Variants
<bw-checkbox>Basic</bw-checkbox>
<bw-checkbox large>Large</bw-checkbox>
<bw-checkbox required>Required</bw-checkbox>
<bw-checkbox indeterminate>Indeterminate</bw-checkbox>
<bw-checkbox label-placement="start">Starting label</bw-checkbox>
<bw-checkbox label-placement="end">Ending Label</bw-checkbox>
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
disabled | disabled | Shows the disabled state and prevents changes | boolean | false |
error | error | Shows an error icon. If a string is passed in, it will render the icon as a tooltip. Has no effect on form validation | any | undefined |
indeterminate | indeterminate | If the checkbox should contain a 3rd indeterminate state | boolean | false |
labelPlacement | label-placement | Whether or not the label should go before or after the checkbox | "end" | "start" | 'end' |
large | large | Makes checkbox bigger | boolean | false |
note | note | Informative text that shows below the control | string | undefined |
originalValue | original-value | The value the control will reset to. Defaults to the initial value if not set. | boolean | undefined |
pending | pending | Shows a loading indicator | boolean | false |
required | required | Is the checkbox required | boolean | false |
success | success | Shows a success icon. Has no effect on form validation | boolean | false |
value | value | Whether or not the checkbox is active | boolean | undefined |
Events
| Event | Description | Type |
|---|---|---|
valueChange | Emits the current value whenever it's state changes | CustomEvent<boolean> |
Methods
checkValidity() => Promise<boolean>
Checks the validity of the checkbox
Returns
Type: Promise<boolean>
true if the checkbox is valid, false otherwise
getCustomError() => Promise<string>
Gets the custom validity of the checkbox
Returns
Type: Promise<string>
The custom validity of the checkbox
reportValidity() => Promise<boolean>
Reports the validity of the checkbox
Returns
Type: Promise<boolean>
true if the checkbox is valid, false otherwise
setCustomValidity(message: string | null) => Promise<void>
Sets the custom validity of the checkbox
Parameters
| Name | Type | Description |
|---|---|---|
message | string | - The message to set the custom validity to |
Returns
Type: Promise<void>
Slots
| Slot | Description |
|---|---|
| The content of the checkbox | |
"note" | The note of the checkbox |
Shadow Parts
| Part | Description |
|---|---|
"label" | The label of the checkbox |
"main" | The main container of the checkbox |
Custom States
| State | Initial Value | Description |
|---|---|---|
:state(--checked) | false | Checkbox is checked (value === true) |
:state(--indeterminate) | false | Checkbox is neither checked or unchecked (value === undefined) |
:state(--invalid) | false | Checkbox is in an invalid form state |
:state(--optional) | true | Checkbox is not required to be checked in the form (required === false) |
:state(--required) | false | Checkbox is required to be checked in the form (required === true) |
:state(--unchecked) | true | Checkbox is not checked (value === false) |
:state(--valid) | true | Checkbox is in a valid form state |
Dependencies
Used by
Depends on
Graph
© 2025 United Systems & Software - All Rights Reserved.