Checkbox

import { Checkbox } from "@clawscale/react";

export default function CheckboxBasic() {
  return (
    <div>
      <Checkbox defaultChecked label="Retry failed tasks" />
      <Checkbox label="Notify owners on failure" />
      <Checkbox defaultChecked label="Skip weekends" />
    </div>
  );
}

import { Checkbox } from "@clawscale/react";
import { useState } from "react";

const DATASETS = ["orders_daily", "customer_profiles", "events_raw", "inventory_snapshots"];

export default function CheckboxIndeterminate() {
  const [selected, setSelected] = useState(["orders_daily", "events_raw"]);
  const toggle = (name: string, checked: boolean) =>
    setSelected((current) => (checked ? [...current, name] : current.filter((item) => item !== name)));
  return (
    <div>
      <Checkbox
        checked={selected.length === DATASETS.length}
        indeterminate={selected.length > 0 && selected.length < DATASETS.length}
        label={`Select all (${selected.length} of ${DATASETS.length})`}
        onChange={(event) => setSelected(event.currentTarget.checked ? DATASETS : [])}
      />
      <div style={{ paddingLeft: 26 }}>
        {DATASETS.map((name) => (
          <Checkbox
            key={name}
            checked={selected.includes(name)}
            label={name}
            onChange={(event) => toggle(name, event.currentTarget.checked)}
          />
        ))}
      </div>
    </div>
  );
}

import { Checkbox } from "@clawscale/react";

const DAYS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];

export default function CheckboxInline() {
  return (
    <div>
      {DAYS.map((day, index) => (
        <Checkbox key={day} defaultChecked={index < 5} inline label={day} />
      ))}
    </div>
  );
}

import { Checkbox } from "@clawscale/react";

export default function CheckboxDisabled() {
  return (
    <div>
      <Checkbox defaultChecked disabled label="Encrypt at rest (required by policy)" />
      <Checkbox disabled label="Allow public read access" />
      <Checkbox disabled indeterminate label="Apply to 3 of 8 buckets" />
    </div>
  );
}

import { Checkbox } from "@clawscale/react";

export default function CheckboxAlignRight() {
  return (
    <div style={{ width: 260 }}>
      <Checkbox alignIndicator="end" defaultChecked label="Daily email digest" />
      <Checkbox alignIndicator="end" defaultChecked label="Failure alerts" />
      <Checkbox alignIndicator="end" label="Page the on-call engineer" />
    </div>
  );
}