Switch Field

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

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

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

export default function MagnitudesDemo() {
  return (
    <div className="flex flex-col items-start gap-3">
      <SwitchField
        name="autoArchiveSm"
        label="Auto-archive done items"
        magnitude="sm"
        defaultChecked
      />
      <SwitchField
        name="autoArchiveMd"
        label="Auto-archive done items"
        magnitude="md"
        defaultChecked
      />
      <SwitchField
        name="autoArchiveLg"
        label="Auto-archive done items"
        magnitude="lg"
        defaultChecked
      />
    </div>
  );
}

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

export default function DisabledDemo() {
  return (
    <div className="flex flex-col items-start gap-3">
      <SwitchField
        name="ssoEnforced"
        label="Enforce single sign-on"
        description="Managed by your identity provider."
        magnitude="md"
        defaultChecked
        disabled
      />
      <SwitchField
        name="legacyApi"
        label="Allow legacy API tokens"
        description="Disabled for this workspace plan."
        magnitude="md"
        disabled
      />
    </div>
  );
}

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

export default function ErrorDemo() {
  return (
    <SwitchField
      name="requireTwoFactor"
      label="Require two-factor authentication"
      description="Every member must enable 2FA before joining."
      magnitude="md"
      error="Enable 2FA on your own account before enforcing it for the workspace."
    />
  );
}

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

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

  return (
    <SwitchField
      name="weeklyDigest"
      label="Weekly project digest"
      description="A Monday summary of activity across your projects."
      magnitude="md"
      checked={checked}
      onCheckedChange={setChecked}
      hint={checked ? "You will receive the digest every Monday." : "Digest emails are paused."}
    />
  );
}