Checkbox
The Checkbox component allows the user to select one or more items from a set. It behaves as a standard HTML checkbox input.
The Checkbox will always be the same height as the text next to it. This allows for a more consistent layout when using checkboxes within context. Per default they are rendered inlined, but can be stacked by wrapping them in a flex container or using a field.
Field Attributes
label
(String): The label of the checkbox.label-start
(String): The label of the checkbox, rendered before the checkbox.description
(String): The description of the checkbox.desc-start
(String): The description of the checkbox, rendered before the checkbox.
Group Attributes
legend
(String): The legend of the group.divided
(Boolean): Whether the checkboxes should be separated by a divider.inline
(Boolean): Whether the checkboxes should be rendered inline.
Basic Usage
Checkbox description
<aura:checkbox label="Checkbox" description="Checkbox description" />
Alternative Label
Checkbox description
<aura:checkbox label-start="Checkbox" desc-start="Checkbox description" />
Disabled
<aura:checkbox disabled ... />
Checked
<aura:checkbox checked .../>
Grouped
To group checkboxes, wrap them in a aura:checkbox.group
component.
<aura:checkbox.group legend="Default Group">
<aura:checkbox label="Checkbox 1" />
<aura:checkbox label="Checkbox 2" />
<aura:checkbox label="Checkbox 3" />
</aura:checkbox.group>
Group styles
When grouping checkboxes, you can use the inline
attribute to render them inline. or divided
to separate them with a
divider.
<aura:checkbox.group divided>
...
</aura:checkbox.group>
<aura:checkbox.group inline>
...
</aura:checkbox.group>
© 2025 kolleg-essig. All rights reserved.