Switch A switch is a form of checkbox intended for binary decisions.
Switches indicate binary choice, that a single option can be either disabled or enabled.
Table of contents
Usage guidelines
When to use
- Consider the sort of question you are asking by using the component, were you to ask that question in longform:
- If it is a yes or no question, for instance, "Would you like to disable comments on your story?", use a switch.
- If it is a question with multiple acceptable answers, or is a tightly related group of yes/no questions, for instance, "Would you like this story to be posted to Twitter? Facebook? Both? Neither?", use checkboxes.
- If it is a question about deciding one option from many, for instance, "What filetype would you like your image to be? JPG, PNG, or GIF?", use radio buttons or a select, depending on how many options are available.
How to use
- Always include a label (as the second child, immediately following to the native checkbox input).
- All labels should be in sentence case.
Accessibility
- Native keyboard support for checkbox-type inputs is carried over to the Resonance switch component.
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 |
|---|---|---|
disabled | boolean | Set initial disabled state |
checked | boolean | Set initial checked/switched state |
API
| Name | Type | Data | Description |
|---|---|---|---|
checked | property | boolean | Get/set checked state |
disabled | property | boolean | Get/set disabled state |
Events
| Event | Detail | Returns |
|---|---|---|
change | no key | Boolean for switch state |
Notes
Required DOM
Without these, the component will throw an error on render.
<input type="checkbox">- Becomes switch
Supported optional DOM
If added as children, these elements will receive specific styles and/or functionality.
<label>- Label element
History
| Version | Note |
|---|---|
| 0.15.5 | Add checkmark to checked switches, lighten unchecked and unchecked+disabled switches |
| 0.15.0 | Add change event. |
| 0.12.0 | Apply new spacing scale. Add min-width to the switch 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.10.0 | Color update |
| 0.7.0 | Web component refactor |
| 0.5.0 | Refactored. No longer using switched attribute/API in favor of checked. |
| 0.4.0 | Removed value API method, which is redundant with switched. |
| 0.2.0 | Cleaner markup, and no longer using classes for .checked and .disabled. |
| 0.1.0 | Initial build to spec. |