ba-checkbox-card
An enhanced checkbox component with a description area for additional context
Checkbox details
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:
Always add descriptive text in the body of ba-checkbox-card to provide users with the context needed for informed selections. This enhances clarity and supports accessibility by offering more information about each option
If you require a checkbox button without a description, use the ba-checkbox component instead.
All of the content in a ba-checkbox-card will be read out at once when a screen reader user lands on it. Keep any descriptive text in the body of ba-checkbox-card short and to the point. If you need to convey more extensive information, consider placing it outside of the card or referencing a separate page/resource. Doing so avoids overwhelming screen reader users and helps maintain a clear, accessible interface.
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>
Slots
| Slot | Description | Permitted elements |
|---|---|---|
| Unnamed slot | Elements will render in the body of the component | <ba‑content>, <ba‑grid>, <ba‑image>, <ba‑media‑object> |
"error" |
Elements will render in the body of the component | <p> |
Parent components
ba-checkbox-card can be slotted into:
Usage
Basic usage
<ba-checkbox
label="Checkbox label"
name="checkboxName"
value="checkboxValue"
required
>
<ba-content>
<p>Additional descriptive content goes here</p>
</ba-content>
</ba-checkbox>