Checkbox Button Group
- HTML/CSS:Dev Ready
- Layout:Responsive
About Checkbox Button Group#
The checkbox-button-group is a set of checkbox buttons wrapped in a fieldset that is also a form element. It is described by a legend with the classes slds-form-element__legend and slds-form-element__label applied to it.
Mobile#
On mobile devices, such as phones and other devices that have touch as the primary method of interaction, buttons in the checkbox button group will have an increased size to accommodate tapping with a finger instead of the more precise mouse cursor, as well as become stacked.
Below is a live example of what to expect in that context. No code changes are needed in the Salesforce platform context as this change occurs automatically in Salesforce native mobile applications. For those users not on the Salesforce platform, these modifications will occur automatically when the secondary touch stylesheet is loaded and the device has touch as the primary method of interaction.
Base#
<fieldset class="slds-form-element">
<legend class="slds-form-element__legend slds-form-element__label">Scheduled Day(s)</legend>
<div class="slds-form-element__control">
<div class="slds-checkbox_button-group">States#
Has Error#
<fieldset class="slds-form-element slds-has-error">
<legend class="slds-form-element__legend slds-form-element__label">Scheduled Day(s)</legend>
<div class="slds-form-element__control">
<div class="slds-checkbox_button-group">Disabled#
<fieldset class="slds-form-element">
<legend class="slds-form-element__legend slds-form-element__label">Scheduled Day(s)</legend>
<div class="slds-form-element__control">
<div class="slds-checkbox_button-group">Overview of CSS Classes#
- Selector
- The CSS class being referred to.
- Summary
- A description of what the class does.
- Support
- Whether the class name is dev-ready (meaning it's fully vetted and tested and safe to use) or prototype (which means it's not fully vetted yet).
- Restrict
- The selector that the class name is allowed to be used on.
- Variant
- The base level pattern for a component. A variant can be extended to create another variant of that component, for example, a stateful button is a derivative of the base button.
- Modifier
- A single class that can be added to an HTML element of a component to modify its output. Typically these will be colors, sizing and positioning.
| Selector | .slds-checkbox_button-group |
|---|---|
| Summary | Initializes checkbox button group |
| Support | dev-ready |
| Restrict | div, span |
| Variant | True |
| Selector | .slds-checkbox_button |
|---|---|
| Summary | Initializes checkbox inside a button group |
| Restrict | .slds-checkbox_button-group span |
| Selector | .slds-checkbox_button__label |
|---|---|
| Summary | Creates a custom styled checkbox |
| Restrict | .slds-checkbox_button label |
| Selector | .slds-checkbox_faux |
|---|---|
| Summary | Creates a custom styled checkbox |
| Restrict | .slds-checkbox_button-group span |
Checkbox Button Group Release Notes
2.13.1
Fixed
- Fixed issue where mobile text size wasn't accurately sized.
2.11.5
Added
- Added documentation and examples for mobile/touch context
2.11.0
Changed
- For mobile devices, checkbox button groups stack vertically to account for the limited horizontal space of mobile screens.
2.10.0
Changed
- For touch devices, increase tap target size of
.slds-checkbox_buttonto$height-tappable(2.75rem)