This is when one, none or multiple options can be selected. If only one option can be selected from list of options, use ba-select or ba-radio-group instead.
Always use the label attribute to give a meaningful label to the field.
Further reading:
Disabled form elements are not supported in BAgel because they create accessibility challenges, such as preventing keyboard navigation, confusing screen reader users, and reducing visual clarity for those with impairments
Further reading:
Code
Properties & Attributes
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
checked
|
checked |
If `true`, the checkbox is selected. | boolean | undefined |
false |
label
(required)
|
label |
text displayed next to the checkbox | string |
undefined |
name
(required)
|
name |
The name of the control, which is submitted with the form data. | string |
undefined |
required
|
required |
If `true`, the user must check the checkbox before submitting a form. | boolean | undefined |
false |
value
(required)
|
value |
the value of the checkbox. | string |
undefined |
Events
| Event | Description | Type |
|---|---|---|
baChange |
Emitted when the checked property has changed. | CustomEvent<CheckboxChangeEventDetail> |
Methods
isValid() => Promise<boolean>
An exposed method for triggering the inputs required validation
reset() => Promise<void>
Resets the input back to its initial value
Returns
Type: Promise<void>
Usage
Basic usage
<ba-checkbox
label="Checkbox label"
name="checkboxName"
value="checkboxValue"
required
></ba-checkbox>