Switch
A toggle switch component for boolean settings.
Switch is a toggle component for boolean settings. It's the most commonly used control in the UI and is almost always paired with a Field.
import { Switch } from "@/components/switch";
<Field name="Enable">
<Switch
checked={data.enabled}
onChange={(enabled) => set({ ...data, enabled })}
/>
</Field>;Props
| Prop | Type | Default | Description |
|---|---|---|---|
checked | boolean | — | Controlled checked state |
onChange | (checked: boolean) => void | — | Called with the new value when toggled |
disabled | boolean | false | Disables the switch and shows reduced opacity |
Controlled vs Uncontrolled
If you pass checked and onChange it behaves as a controlled component driven by your config state, which is how it should be used in almost every case:
<Switch
checked={data.enabled}
onChange={(enabled) => set({ ...data, enabled })}
/>If you omit both props it manages its own internal state, which is rarely useful in practice since you won't be able to sync the value with C++.