Checkbox Button
- HTML/CSS:Dev Ready
- Layout:Responsive
A styled checkable input that communicates if an option is being added to a group
Base
Preview
About Checkbox Button
The ‘add button’ is similar to a checkbox in that it presents a user with a binary choice for an item. However, the only action a user can take is to add (or remove) an entity. When a user clicks the add button, the entity is stored, similar to an ‘add to cart’ experience, until the user saves changes.
The add button is useful for increasing clarity. Since the button only adds or removes entities, the user knows the action they will prompt upon click. The add button also provides a clear visual affordance (in SLDS, we use the ‘+’ icon as an metaphor for ‘add’) and a large target to take this action.
Use the add button if the component you’re building:
- Exists without other multi-select elements (i.e. checkboxes)
- Allows users to select multiple entities
- Semantically fits the add/remove model
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_add-button |
|---|---|
| Summary | Initializes checkbox add button |
| Support | dev-ready |
| Restrict | div |
| Variant | True |
| Selector | .slds-checkbox_faux |
|---|---|
| Summary | Creates a custom styled checkbox |
| Restrict | .slds-checkbox_add-button label |