Switch

import { Switch } from "@makeplane/propel/components/switch";
import * as React from "react";

export default function BasicDemo() {
  const [checked, setChecked] = React.useState(true);

  return (
    <Switch
      magnitude="md"
      aria-label="Enable notifications"
      checked={checked}
      onCheckedChange={setChecked}
    />
  );
}

import { Switch, type SwitchMagnitude } from "@makeplane/propel/components/switch";

const MAGNITUDES: SwitchMagnitude[] = ["lg", "md", "sm"];

export default function SizesDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      {MAGNITUDES.map((magnitude) => (
        <Switch
          key={magnitude}
          magnitude={magnitude}
          defaultChecked
          aria-label={`Size ${magnitude}`}
        />
      ))}
    </div>
  );
}

import { Switch } from "@makeplane/propel/components/switch";

export default function StatesDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Switch magnitude="md" defaultChecked aria-label="On" />
      <Switch magnitude="md" defaultChecked={false} aria-label="Off" />
      <Switch magnitude="md" defaultChecked disabled aria-label="Disabled on" />
      <Switch magnitude="md" defaultChecked={false} disabled aria-label="Disabled off" />
      <Switch magnitude="md" defaultChecked readOnly aria-label="Read only on" />
      <Switch magnitude="md" defaultChecked={false} readOnly aria-label="Read only off" />
    </div>
  );
}

import { SwitchField } from "@makeplane/propel/components/switch-field";

export default function WithDescriptionDemo() {
  return (
    <SwitchField
      name="restartOnFailure"
      label="Restart on failure"
      description="Automatically restart the service after a crash."
      magnitude="md"
      defaultChecked
    />
  );
}