import * as React from "react";
 
import { Checkbox } from "@/components/ui/checkbox";
import { Stack } from "@/components/ui/stack";
 
export function CheckboxExample(): React.JSX.Element {
  return (
    <Stack alignItems="center" direction="row" gap={2}>
      <Checkbox />
      <span>Label</span>
    </Stack>
  );
}

import * as React from "react";
 
import { Checkbox } from "@/components/ui/checkbox";
import { CheckboxGroup } from "@/components/ui/checkbox-group";
import { Stack } from "@/components/ui/stack";
 
export function CheckboxExample(): React.JSX.Element {
  return (
    <CheckboxGroup>
      <Stack alignItems="center" direction="row" gap={2}>
        <Checkbox />
        <span>Default</span>
      </Stack>
      <Stack alignItems="center" direction="row" gap={2}>
        <Checkbox checked />
        <span>Checked</span>
      </Stack>
      <Stack alignItems="center" direction="row" gap={2}>
        <Checkbox checked indeterminate />
        <span>Intermediate</span>
      </Stack>
      <Stack alignItems="center" direction="row" gap={2}>
        <Checkbox disabled />
        <span>Disabled</span>
      </Stack>
      <Stack alignItems="center" direction="row" gap={2}>
        <Checkbox checked disabled />
        <span>Disabled checked</span>
      </Stack>
    </CheckboxGroup>
  );
}