Toggle
Toggles allow users to switch a setting on or off instantly. They are best used for binary actions that take effect immediately.
Default
A basic uncontrolled toggle that manages its own on/off state.
With state label
Pass showLabel to display an On or Off label beside the track.
Default checked
Use defaultChecked to set the initial state to on.
Controlled
Use checked and onChange together to control the toggle from a parent component. Current state: Off
Disabled
Add disabled to prevent interaction. Disabled toggles retain their visual style at reduced opacity.
Greenhouse examples
Toggles work well for settings that take effect immediately, like enabling or disabling greenhouse automations.
Usage
Use defaultChecked for an uncontrolled toggle that manages its own state. Use checked with onChange when a parent component needs to control the value. Pass showLabel to display an On / Off label beside the track.
Explore the Toggle component by adjusting its properties below. Changes are reflected in the live preview and code snippet in real time.
Properties
<Toggle onChange={(checked) => {}} />