Checkbox Checkboxes are a form control that can be turned on or off.
The use of checkboxes indicate that several related options are available, and that more than one of them may be simultaneously selected.
Table of contents
Standard usage
Ternary / Indeterminate
Usage guidelines
When to use
- Use a checkbox when there are multiple related options to choose from, and several of them may be selected.
- If there is only one option, use a switch instead.
How to use
- When placing multiple checkboxes near one another, stack them vertically rather than horizontally.
- Checkbox components require both a native
<input type="checkbox">and a<label>child element in order to work. - When there are many options available and it is likely that someone might want to select all or almost all of them, consider using the ternary variation in order to speed up the workflow. This variation lets one checkbox toggle many related checkboxes at the same time.
Accessibility
- The keyboard support enjoyed by native checkbox elements will still work for Resonance checkboxes; they can still be tabbed through, and the spacebar will still toggle them.
Attributes
An asterisk next to a value denotes that it is the default value for that attribute. Unless noted otherwise, attributes should be added to the component element directly. Boolean attributes work based on their presence or absence from the component.
<res-component booleanAttribute stringAttribute="parameter">
<child-element></child-element>
</res-component>| Attribute | Type | Description |
|---|---|---|
checked | boolean | Set initial state to checked |
disabled | boolean | Set initial state to disabled |
indeterminate | boolean | Set initial state to indeterminate |
ternary | boolean | Set as a ternary leader |
leader | string | Set as a ternary follower, stores id of ternary leader |
API
| Name | Type | Data | Description |
|---|---|---|---|
checked | property | boolean | Get/set checked state |
disabled | property | boolean | Get/set disabled state |
indeterminate | property | boolean | Get/set indeterminate state |
ternary | property | boolean | Get/set ternary leader state |
leader | property | string | Get/set ternary follower state |
setupTernaryFollowers | method | --- | Connects a ternary leader to its ternary followers |
Notes
Required DOM
Without these, the component will throw an error on render.
<label>- Label element<input type="checkbox">- Checkbox element
History
| Version | Note |
|---|---|
| 0.13.0 | Add support for ternary res-checkboxes. |
| 0.12.0 | Apply new spacing scale. Add min-width to the checkbox so that it doesn't get shrunk when the component is too narrow. |
| 0.11.10 | Focus the label selector so it doesn't get applied inconsistently. |
| 0.11.2 | Prevent duplicate elements from being created |
| 0.11.0 | Tweaks to accommodate new icon set. |
| 0.10.0 | Color update |
| 0.7.0 | Web component refactor |
| 0.5.0 | Total refactor! Component requires a label and input, but does everything else for you. Label can go on either side of checkbox too. |
| 0.3.0 | Thinner border |
| 0.2.0 | Cleaner markup. Uses res-icon for checkmark. |
| 0.1.0 | Initial build to spec. |