Propel

Switch Field

A switch laid out as a field row with label, description, and hint or error text.

Automatically restart the service after a crash.

You can change this later.

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

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

Installation

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

Usage

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

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

Examples

Sizes

switchSize (sm, md, lg) sizes the switch track; size (lg, xl, 2xl) sizes the label and helper text independently — set them together for the common case.

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

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

Disabled

Managed by your identity provider.

Disabled for this workspace plan.

Show code
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."
        switchSize="md"
        size="lg"
        defaultChecked
        disabled
      />
      <SwitchField
        name="legacyApi"
        label="Allow legacy API tokens"
        description="Disabled for this workspace plan."
        switchSize="md"
        size="lg"
        disabled
      />
    </div>
  );
}

Error

Passing error marks the field invalid, replaces the hint with the error text, and — while the switch is off — outlines the track with a danger ring, the same treatment Checkbox uses.

Every member must enable 2FA before joining.

Enable 2FA on your own account before enforcing it for the workspace.
Show code
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."
      switchSize="md"
      size="lg"
      error="Enable 2FA on your own account before enforcing it for the workspace."
    />
  );
}

Controlled

A Monday summary of activity across your projects.

Digest emails are paused.

Show code
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."
      switchSize="md"
      size="lg"
      checked={checked}
      onCheckedChange={setChecked}
      hint={checked ? "You will receive the digest every Monday." : "Digest emails are paused."}
    />
  );
}

API Reference

SwitchField

Ready-to-use switch field with label, description, and helper/error text.

PropTypeDefaultDescription
switchSize(required)"lg" | "md" | "sm"—The switch track's size.
size(required)"lg" | "xl" | "2xl"—Label and helper text size.
label(required)string—Visible field label.
renderReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, SwitchRootState>—Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
hintReactNode—Helper text shown below the control. Replaced by `error` when an error is set.
errorReactNode—Error text shown below the control.
descriptionReactNode—Optional supporting text announced as the switch description.