Checkbox

import { Checkbox } from "swash/controls/Checkbox";
import { FormCheckbox } from "swash/form/FormCheckbox";
import { FormLabel } from "swash/form/FormLabel";
import { FormHint } from "swash/form/FormHint";

export const Example = () => {
  return (
    <div className="flex flex-col gap-4">
      <FormCheckbox>
        <Checkbox id="unchecked" />
        <FormLabel htmlFor="unchecked">Unchecked</FormLabel>
        <FormHint>This is a hint.</FormHint>
      </FormCheckbox>
      <FormCheckbox>
        <Checkbox
          ref={(element) => {
            if (element) element.indeterminate = true;
          }}
          id="indeterminate"
        />
        <FormLabel htmlFor="indeterminate">Indeterminate</FormLabel>
      </FormCheckbox>
      <FormCheckbox>
        <Checkbox id="disabled" disabled />
        <FormLabel htmlFor="disabled">Disabled</FormLabel>
      </FormCheckbox>
      <FormCheckbox>
        <Checkbox id="disabled-checked" disabled defaultChecked />
        <FormLabel htmlFor="disabled-checked">Disabled & Checked</FormLabel>
      </FormCheckbox>
    </div>
  );
};

import { Checkbox } from "swash/controls/Checkbox";

export const Example = () => {
  return (
    <div className="flex flex-col gap-4">
      <Checkbox scale="sm" />
      <Checkbox scale="md" />
    </div>
  );
};