Checkbox

import { Checkbox } from "@prismane/core";

function Demo() {
  const [value, setValue] = useState("");

  return (
    <Checkbox
      name="agreement"
      label="I agree that Prismane is the best!"
      value={value}
      onChange={(e) => setValue(e.target.checked)}
    />
  );
}

function Demo() {
  const [value, setValue] = useState("");

  return (
    <Flex direction="column" gap={fr(2)}>
      <Checkbox
        size="xs"
        name="size"
        label="xs Size"
        value={value}
        onChange={(e) => setValue(e.target.checked)}
      />
      <Checkbox
        size="sm"
        name="size"
        label="sm Size"
        value={value}
        onChange={(e) => setValue(e.target.checked)}
      />
      <Checkbox
        size="base"
        name="size"
        label="base Size"
        value={value}
        onChange={(e) => setValue(e.target.checked)}
      />
      <Checkbox
        size="md"
        name="size"
        label="md Size"
        value={value}
        onChange={(e) => setValue(e.target.checked)}
      />
      <Checkbox
        size="lg"
        name="size"
        label="lg Size"
        value={value}
        onChange={(e) => setValue(e.target.checked)}
      />
    </Flex>
  );
}

function Demo() {
  const [value, setValue] = useState("");

  return (
    <Checkbox
      indeterminate
      name="indeterminate"
      label="I cannot determine"
      value={value}
      onChange={(e) => setValue(e.target.checked)}
    />
  );
}