Designing a Plume Switch
A Plume Switch is a theme-able <input type="Switch"/>
replacement. It can render as “checked” and “unchecked”.
This document describes the variants, elements, and slots your Plasmic component needs to have to be turned into a Plume Switch.
Switch Anatomy
Switch Variants
Some variants that your Switch component built in Plasmic should include are:
Variant | Description | Required? |
---|---|---|
isSelected | Shows Switch in selected state | Required |
isIndeterminate | Shows Switch in indeterminate state | Optional |
isDisabled | Shows Switch in disabled state | Recommended |
hasLabel | Shows a label for the Switch | Recommended |
In addition, you should consider styling the following interaction variants:
Interaction Variant | Description | Required? |
---|---|---|
Focus Visible Within | Control is focused via keyboard tabbing | Recommended |
Focused Within | Control is focused | Optional |
Hover | Control is hovered | Optional |
Switch elements
Some elements that should be in your Switch component are:
Element | Description | Required? |
---|---|---|
root | The root element | Required |
Switch slots
Some slots that your Switch component should have are:
Slot | Description | Required? |
---|---|---|
label | Label for this Switch | Required |