Checkbox Group
<ahi-checkbox-group> | AhiCheckboxGroup
Checkbox groups label and lay out a set of related
checkboxes. The group is a semantic
wrapper: each child checkbox keeps its own name/value and submits independently.
Checkbox groups label and lay out a set of related
checkboxes. The group is a semantic
wrapper — it provides the fieldset, label, help text, and layout, while each child checkbox keeps its own
name/value and submits independently.
<ahi-checkbox-group label="Symptoms" help-text="Select all that apply.">
<ahi-checkbox name="symptoms" value="cough">Cough</ahi-checkbox>
<ahi-checkbox name="symptoms" value="fever">Fever</ahi-checkbox>
<ahi-checkbox name="symptoms" value="rash">Rash</ahi-checkbox>
</ahi-checkbox-group>
This component does not own a group value and is not itself a form control — the checkboxes inside it
submit on their own. Give the related checkboxes the same name to collect them as a set. To
require a selection, set required on the individual checkboxes; the group’s
required attribute only adds a visual indicator to the label.
Examples
Horizontal orientation
Use orientation="horizontal" to lay the checkboxes out in a row.
<ahi-checkbox-group label="Days" orientation="horizontal">
<ahi-checkbox name="days" value="mon">Mon</ahi-checkbox>
<ahi-checkbox name="days" value="tue">Tue</ahi-checkbox>
<ahi-checkbox name="days" value="wed">Wed</ahi-checkbox>
<ahi-checkbox name="days" value="thu">Thu</ahi-checkbox>
<ahi-checkbox name="days" value="fri">Fri</ahi-checkbox>
</ahi-checkbox-group>
Required indicator
The required attribute adds a required indicator to the group’s label. Enforce the requirement
on the individual checkboxes.
<ahi-checkbox-group label="Agreements" required>
<ahi-checkbox name="agree" value="terms" required>I accept the terms</ahi-checkbox>
<ahi-checkbox name="agree" value="privacy">I accept the privacy policy</ahi-checkbox>
</ahi-checkbox-group>
Adjusting the spacing
Use the --gap custom property to change the spacing between checkboxes.
<ahi-checkbox-group label="Options" style="--gap: var(--ahi-space-5);">
<ahi-checkbox name="opt" value="a">Option A</ahi-checkbox>
<ahi-checkbox name="opt" value="b">Option B</ahi-checkbox>
</ahi-checkbox-group>
Importing
To import this component using a script tag:
<script type="module" src="/path/to/azalea-kit-ui/dist/components/checkbox-group/checkbox-group.js"></script>To import this component using a bundler:
import '@azaleahealth/azalea-kit-ui/dist/components/checkbox-group/checkbox-group.js';Slots
| Name | Description |
|---|---|
| (default) | The default slot where <ahi-checkbox> elements are placed. |
label
|
The checkbox group’s label. Required for proper accessibility. Alternatively, use the
label attribute.
|
help-text
|
Text that describes how to use the checkbox group. Alternatively, use the
help-text attribute.
|
Learn more about using slots.
Properties
| Name | Description | Type | Default | |
|---|---|---|---|---|
label
|
The checkbox group’s label. Required for proper accessibility. If you need to display HTML, use the
label slot.
|
string
|
''
|
|
helpText
help-text
|
The checkbox group’s help text. If you need to display HTML, use the help-text slot
instead.
|
string
|
''
|
|
orientation
|
The orientation in which the checkboxes are laid out. |
'horizontal' | 'vertical'
|
'vertical'
|
|
required
|
Adds a required indicator to the group’s label. This is visual only — to enforce the requirement,
set required on the individual checkboxes (or a minimum number of them).
|
boolean
|
false
|
|
updateComplete |
A read-only promise that resolves when the component has finished updating. |
Learn more about properties and attributes.
Methods
| Name | Description | Arguments |
|---|---|---|
focus() |
Sets focus on the first enabled checkbox in the group. |
options: FocusOptions
|
Learn more about methods.
Custom Properties
| Name | Description | Default |
|---|---|---|
--gap |
The spacing between checkboxes. |
Learn more about customizing CSS custom properties.
CSS Parts
| Name | Description |
|---|---|
form-control |
The fieldset that wraps the label, checkboxes, and help text. |
form-control-label |
The label’s wrapper. |
form-control-input |
The container that wraps the checkboxes. |
form-control-help-text |
The help text’s wrapper. |
Learn more about customizing CSS parts.