Checkbox

import { useState } from "react";
import { Checkbox } from "density-base-ui";

export default function CheckboxExample() {
  const [showArchivedProjects, setShowArchivedProjects] = useState(true);

  return (
    <Checkbox
      checked={showArchivedProjects}
      onCheckedChange={setShowArchivedProjects}
    >
      Show archived projects
    </Checkbox>
  );
}

import { useState } from "react";
import { Checkbox } from "density-base-ui";

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

  return (
    <Checkbox
      checked={checked}
      onCheckedChange={setChecked}
      label="Field label"
    >
      Control label
    </Checkbox>
  );
}

import { useState } from "react";
import { Checkbox } from "density-base-ui";

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

  return (
    <Checkbox
      checked={checked}
      onCheckedChange={setChecked}
      label="Field label"
      hint="A short field hint"
    >
      Control label
    </Checkbox>
  );
}

import { useState } from "react";
import { Checkbox } from "density-base-ui";

export default function CheckboxErrorExample() {
  const [acceptedTerms, setAcceptedTerms] = useState(false);

  return (
    <Checkbox
      checked={acceptedTerms}
      onCheckedChange={setAcceptedTerms}
      errorMessage="Accept the terms to continue."
      hint="Required before creating the project."
      label="Terms"
    >
      I accept the terms.
    </Checkbox>
  );
}

import { useState } from "react";
import { Checkbox, Separator, View } from "density-base-ui";

export default function CheckboxFieldOrientationExample() {
  const [verticalChecked, setVerticalChecked] = useState(false);
  const [horizontalChecked, setHorizontalChecked] = useState(false);

  return (
    <View align="start" gap="md" padding={false}>
      <Checkbox
        checked={verticalChecked}
        onCheckedChange={setVerticalChecked}
        label="Vertical field"
        hint="The label stacks above the control."
        fieldOrientation="vertical"
      >
        Control label
      </Checkbox>
      <Separator />
      <Checkbox
        checked={horizontalChecked}
        onCheckedChange={setHorizontalChecked}
        label="Horizontal field"
        hint="The label sits beside the control."
        fieldOrientation="horizontal"
      >
        Control label
      </Checkbox>
    </View>
  );
}

import { useState } from "react";
import { Checkbox, View } from "density-base-ui";

export default function CheckboxEmphasisExample() {
  const [checkedEmphases, setCheckedEmphases] = useState<
    Record<string, boolean>
  >({});
  const updateCheckedEmphasis = (emphasis: string, checked: boolean) => {
    setCheckedEmphases((currentEmphases) => ({
      ...currentEmphases,
      [emphasis]: checked,
    }));
  };

  return (
    <View align="start" gap="md" padding={false}>
      <Checkbox
        checked={checkedEmphases.primary}
        onCheckedChange={(checked) => updateCheckedEmphasis("primary", checked)}
        emphasis="primary"
      >
        Primary
      </Checkbox>
      <Checkbox
        checked={checkedEmphases.secondary}
        onCheckedChange={(checked) =>
          updateCheckedEmphasis("secondary", checked)
        }
        emphasis="secondary"
      >
        Secondary
      </Checkbox>
      <Checkbox
        checked={checkedEmphases.outline}
        onCheckedChange={(checked) => updateCheckedEmphasis("outline", checked)}
        emphasis="outline"
      >
        Outline
      </Checkbox>
      <Checkbox
        checked={checkedEmphases.ghostPrimary}
        onCheckedChange={(checked) =>
          updateCheckedEmphasis("ghostPrimary", checked)
        }
        emphasis="ghost-primary"
      >
        Ghost primary
      </Checkbox>
      <Checkbox
        checked={checkedEmphases.ghostSecondary}
        onCheckedChange={(checked) =>
          updateCheckedEmphasis("ghostSecondary", checked)
        }
        emphasis="ghost-secondary"
      >
        Ghost secondary
      </Checkbox>
      <Checkbox
        checked={checkedEmphases.ghostTertiary}
        onCheckedChange={(checked) =>
          updateCheckedEmphasis("ghostTertiary", checked)
        }
        emphasis="ghost-tertiary"
      >
        Ghost tertiary
      </Checkbox>
    </View>
  );
}

import { useState } from "react";
import { Checkbox, View } from "density-base-ui";

export default function CheckboxSizeExample() {
  const [checkedSizes, setCheckedSizes] = useState<Record<string, boolean>>({});
  const updateCheckedSize = (size: string, checked: boolean) => {
    setCheckedSizes((currentSizes) => ({ ...currentSizes, [size]: checked }));
  };

  return (
    <View align="start" gap="md" padding={false}>
      <Checkbox
        checked={checkedSizes["2xs"]}
        onCheckedChange={(checked) => updateCheckedSize("2xs", checked)}
        size="2xs"
      >
        2xs
      </Checkbox>
      <Checkbox
        checked={checkedSizes.xs}
        onCheckedChange={(checked) => updateCheckedSize("xs", checked)}
        size="xs"
      >
        xs
      </Checkbox>
      <Checkbox
        checked={checkedSizes.sm}
        onCheckedChange={(checked) => updateCheckedSize("sm", checked)}
        size="sm"
      >
        sm
      </Checkbox>
      <Checkbox
        checked={checkedSizes.md}
        onCheckedChange={(checked) => updateCheckedSize("md", checked)}
        size="md"
      >
        md
      </Checkbox>
      <Checkbox
        checked={checkedSizes.lg}
        onCheckedChange={(checked) => updateCheckedSize("lg", checked)}
        size="lg"
      >
        lg
      </Checkbox>
      <Checkbox
        checked={checkedSizes.xl}
        onCheckedChange={(checked) => updateCheckedSize("xl", checked)}
        size="xl"
      >
        xl
      </Checkbox>
      <Checkbox
        checked={checkedSizes["2xl"]}
        onCheckedChange={(checked) => updateCheckedSize("2xl", checked)}
        size="2xl"
      >
        2xl
      </Checkbox>
      <Checkbox
        checked={checkedSizes["3xl"]}
        onCheckedChange={(checked) => updateCheckedSize("3xl", checked)}
        size="3xl"
      >
        3xl
      </Checkbox>
    </View>
  );
}