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 |