Checkbox Field

import { CheckboxField } from "@makeplane/propel/components/checkbox-field";

export default function BasicDemo() {
  return (
    <CheckboxField
      name="emailUpdates"
      value="enabled"
      label="Email updates"
      magnitude="md"
      description="Send a message when the deployment status changes."
      hint="You can change this later."
      defaultChecked
    />
  );
}

import { CheckboxField } from "@makeplane/propel/components/checkbox-field";

export default function MagnitudesDemo() {
  return (
    <div className="flex flex-col gap-4">
      <CheckboxField
        name="notify-md"
        value="md"
        label="Comfortable"
        magnitude="md"
        description="Notify me when a work item is assigned to me."
        hint="You can change this later."
      />
      <CheckboxField
        name="notify-lg"
        value="lg"
        label="Roomy"
        magnitude="lg"
        description="Notify me when a work item is assigned to me."
        hint="You can change this later."
      />
      <CheckboxField
        name="notify-xl"
        value="xl"
        label="Spacious"
        magnitude="xl"
        description="Notify me when a work item is assigned to me."
        hint="You can change this later."
      />
    </div>
  );
}

import { CheckboxField } from "@makeplane/propel/components/checkbox-field";

export default function InvalidDemo() {
  return (
    <div className="flex flex-col gap-4">
      <CheckboxField name="digest" value="enabled" label="Send me a weekly digest" magnitude="md" />
      <CheckboxField
        name="terms"
        value="accepted"
        label="Accept the workspace terms"
        magnitude="md"
        error="You must accept the terms to continue."
      />
    </div>
  );
}

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

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

  return (
    <CheckboxField
      name="autoArchive"
      value="enabled"
      label="Auto-archive completed work items"
      magnitude="md"
      description="Move items to the archive one week after they are marked done."
      hint={checked ? "Archiving is on." : "Archiving is off."}
      checked={checked}
      onCheckedChange={setChecked}
    />
  );
}