The switch component is a simple control that provides a way for the user to toggle between two options. The switch can be used within forms, but is more frequently used as a way to turn features (or entire feature sets) on or off.
The essential parts of a switch are the container (or the rail) and the handlebar. Note: The switch can be accessible and will show an on/off indicator if accessibility is turned on for their device.
- Knob (32px)
- Rail (100px width)
The accessible switch is for users that have turned on accessibility settings on their device, and the platform supports it. Currently only iOS is known to support this.
- Rail (100px width)
- On/off indicator (12px) (iOS only)
Note: shape is a selection made by the FI within Theme Builder (sharp, soft, round, squircle), and the radius is based on the size of the component. The switch component is considered to be a small component.
Generally a switch can be used as a form input or as a way to turn a featureset on or off, and should follow the placement/alignment of any sibling content. As an example, when placed within a form, the switch should be left aligned if the other form elements are left aligned, centered if the other form elements are centered, or right aligned if the other form elements are right aligned. If the switch appears in a list where other list items have labels left aligned and controls right aligned, the switch should maintain the pattern and be right aligned. Ultimately the switch doesn’t have any placement and/or alignment opinions, and should be controlled by the parent container.
When toggling a switch, the related action should occur immediately; changes should take effect right when the user interacts with the switch without the need to interact with a save or submit button. Any changes resulting from interacting with the switch should persist until the user flips the switch again.
Static — Hover
Select —Accessibility Indicator
Selected — Hover
Deselect — Accessibility Indicator
Loading — Indeterminate
Loading Complete — Indeterminate
After the loading is complete the selected static switch will be enabled.
Developer DocsVue Developer Docs
Component documentation coming soon!