Switch - Docs - Artefact

Switch

Forms

Smart auto-detect

Introduction

A control that allows the user to toggle between checked and unchecked states.

Usage

Enable Notifications

import { Switch } from "../components/ui";

export default function MyPage() {
  return (
    <Switch
      defaultChecked={true}
      onCheckedChange={(details) => console.log(details.checked)}
      interactive
    >
      Enable Notifications
    </Switch>
  );
}

CMS Page Builder

This component is available as a switch block in the Page Builder (content/pages/*.json):

{
  "type": "switch",
  "label": "Dark Mode",
  "checked": true,
  "colorPalette": "blue"
}

Props

Prop	Type	Description
`children`	`any`	Label content to be rendered next to the switch.
`class`	`string`	Custom CSS classes.
`checked`	`boolean`	Whether the switch is checked (controlled).
`defaultChecked`	`boolean`	The initial checked state (uncontrolled).
`disabled`	`boolean`	Whether the switch is disabled.
`onCheckedChange`	`(details: { checked: boolean }) => void`	Callback triggered when the checked state changes.

| size | `"sm" \ | "md" \ | "lg"` | The size of the switch. |

| interactive | boolean | Forces hydration as an island. |