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:

VariantDescriptionRequired?
isSelectedShows Switch in selected stateRequired
isIndeterminateShows Switch in indeterminate stateOptional
isDisabledShows Switch in disabled stateRecommended
hasLabelShows a label for the SwitchRecommended

In addition, you should consider styling the following interaction variants:

Interaction VariantDescriptionRequired?
Focus Visible WithinControl is focused via keyboard tabbingRecommended
Focused WithinControl is focusedOptional
HoverControl is hoveredOptional

Switch elements

Some elements that should be in your Switch component are:

ElementDescriptionRequired?
rootThe root elementRequired

Switch slots

Some slots that your Switch component should have are:

SlotDescriptionRequired?
labelLabel for this SwitchRequired