Switch

The Switch component implements an <input type="checkbox"/> replacement. It differs from Checkbox in that it only supports on and off states, and not an “indeterminate” state.

Examples

This is just an example Switch component, designed in the Plain Kit project. You have total freedom to design Plume components exactly as you'd want them to be, with your own unique variants and behaviors.

Switch to a different kit:

Plain Kit

Basic Switch with label

Switch Props

PropTypeDescription
childrenReact.ReactNodeLabel for the Switch
isSelectedbooleanWhether the Switch is toggled on (controlled)
defaultSelectedbooleanWhether the Switch is toggled on by default (uncontrolled)
isDisabledbooleanWhether the Switch is disabled
isReadOnlybooleanWhether the Switch is read-only
refPlumeSwitchRefProgrammatic access to Switch

PlumeSwitchRef

MethodDescription
focus()Focuses this Switch
UNSAFE_getDOMNode()Returns the root label DOM element

Build your own!

Build your own Switch, designed in Plasmic, with the useSwitch hook!