Checkbox

import { Checkbox } from "seed-design/ui/checkbox";

export default function CheckboxPreview() {
  return <Checkbox label="Hello World" />;
}

npx @seed-design/cli@latest add checkbox

pnpm dlx @seed-design/cli@latest add checkbox

yarn dlx @seed-design/cli@latest add checkbox

bun x @seed-design/cli@latest add checkbox

import { Checkbox } from "seed-design/ui/checkbox";

export default function CheckboxSize() {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
      <Checkbox label="Medium (default)" size="medium" />
      <Checkbox label="Large" size="large" />
    </div>
  );
}

import { Checkbox } from "seed-design/ui/checkbox";

export default function CheckboxVariant() {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
      <Checkbox label="Square (default)" variant="square" />
      <Checkbox label="Ghost" variant="ghost" />
    </div>
  );
}

import { Checkbox } from "seed-design/ui/checkbox";

export default function CheckboxIndeterminate() {
  return <Checkbox defaultChecked label="indeterminate" indeterminate />;
}

import { Checkbox } from "seed-design/ui/checkbox";

export default function CheckboxStronger() {
  return <Checkbox label="Bold Label Text" weight="stronger" />;
}

import { Checkbox } from "seed-design/ui/checkbox";

export default function CheckboxLongText() {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
      <Checkbox
        size="medium"
        label="Lorem ipsum dolor sit, amet consectetur adipisicing elit. At a eaque fugiat sint sapiente.
          Id, hic ex, blanditiis totam animi amet delectus temporibus quae fugiat magnam, quos eaque
          dolorum a? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Possimus labore unde
          minus temporibus beatae commodi et nesciunt iure in dignissimos suscipit, alias ab
          voluptatem facilis tempora numquam. Veritatis, dolorum suscipit! Lorem ipsum dolor sit,
          amet consectetur adipisicing elit. Explicabo fugiat molestias iusto, ipsum distinctio
          officia ad id ratione esse ducimus architecto deleniti illum reiciendis rerum, at
          blanditiis molestiae. Cupiditate, nobis? Lorem ipsum dolor sit amet consectetur
          adipisicing elit. Ab, magni. Aliquid inventore quaerat nemo architecto harum earum quas
          porro repudiandae explicabo repellat repellendus magni, corporis omnis laborum, velit
          dicta blanditiis. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Debitis,
          eveniet quas. Accusamus facere veritatis expedita delectus, asperiores numquam placeat
          necessitatibus assumenda, nesciunt in dolorem sit provident repellendus, voluptatem earum!
          Consequatur. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aut earum
          asperiores aliquam magnam est delectus veritatis numquam sint porro tenetur dolores nobis,
          deleniti voluptas quaerat, quia voluptatum soluta autem perspiciatis? Lorem ipsum dolor
          sit amet consectetur adipisicing elit. Facilis possimus eaque aliquam maxime? Quidem enim,
          sed itaque at veritatis nihil officia esse qui provident ipsa adipisci necessitatibus
          officiis distinctio laborum!"
      />
      <Checkbox
        size="large"
        label="Lorem ipsum dolor sit, amet consectetur adipisicing elit. At a eaque fugiat sint sapiente.
          Id, hic ex, blanditiis totam animi amet delectus temporibus quae fugiat magnam, quos eaque
          dolorum a? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Possimus labore unde
          minus temporibus beatae commodi et nesciunt iure in dignissimos suscipit, alias ab
          voluptatem facilis tempora numquam. Veritatis, dolorum suscipit! Lorem ipsum dolor sit,
          amet consectetur adipisicing elit. Explicabo fugiat molestias iusto, ipsum distinctio
          officia ad id ratione esse ducimus architecto deleniti illum reiciendis rerum, at
          blanditiis molestiae. Cupiditate, nobis? Lorem ipsum dolor sit amet consectetur
          adipisicing elit. Ab, magni. Aliquid inventore quaerat nemo architecto harum earum quas
          porro repudiandae explicabo repellat repellendus magni, corporis omnis laborum, velit
          dicta blanditiis. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Debitis,
          eveniet quas. Accusamus facere veritatis expedita delectus, asperiores numquam placeat
          necessitatibus assumenda, nesciunt in dolorem sit provident repellendus, voluptatem earum!
          Consequatur. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aut earum
          asperiores aliquam magnam est delectus veritatis numquam sint porro tenetur dolores nobis,
          deleniti voluptas quaerat, quia voluptatum soluta autem perspiciatis? Lorem ipsum dolor
          sit amet consectetur adipisicing elit. Facilis possimus eaque aliquam maxime? Quidem enim,
          sed itaque at veritatis nihil officia esse qui provident ipsa adipisci necessitatibus
          officiis distinctio laborum!"
      />
    </div>
  );
}

import { Checkbox } from "seed-design/ui/checkbox";

export default function CheckboxDisabled() {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
      <Checkbox defaultChecked label="Disabled Checked, Square" disabled />
      <Checkbox checked={false} label="Disabled without Checked, Square" disabled />
      <Checkbox variant="ghost" defaultChecked label="Disabled Checked, Ghost" disabled />
      <Checkbox variant="ghost" checked={false} label="Disabled without Checked, Ghost" disabled />
    </div>
  );
}

import { HStack, VStack } from "@seed-design/react";
import { useCallback, type FormEvent } from "react";
import { useController, useForm } from "react-hook-form";
import { ActionButton } from "seed-design/ui/action-button";
import { Checkbox } from "seed-design/ui/checkbox";

const POSSIBLE_FRUIT_VALUES = ["apple", "melon", "mango"] as const;

type FormValues = Record<(typeof POSSIBLE_FRUIT_VALUES)[number], boolean>;

export default function CheckboxReactHookForm() {
  const { handleSubmit, reset, setValue, control } = useForm<FormValues>({
    defaultValues: {
      apple: false,
      melon: true,
      mango: false,
    },
  });

  const onValid = useCallback((data: FormValues) => {
    window.alert(JSON.stringify(data, null, 2));
  }, []);

  const onReset = useCallback(
    (event: FormEvent) => {
      event.preventDefault();
      reset();
    },
    [reset],
  );

  return (
    <VStack gap="x3" as="form" onSubmit={handleSubmit(onValid)} onReset={onReset}>
      <VStack>
        {POSSIBLE_FRUIT_VALUES.map((name) => {
          const {
            field: { value, ...restProps },
            fieldState: { invalid },
          } = useController({ name, control });
          return (
            <Checkbox
              key={name}
              label={name}
              checked={value}
              inputProps={restProps}
              invalid={invalid}
            />
          );
        })}
      </VStack>
      <HStack gap="x2">
        <ActionButton type="reset" variant="neutralWeak">
          초기화
        </ActionButton>
        <ActionButton
          type="button"
          variant="neutralWeak"
          flexGrow={1}
          onClick={() => setValue("mango", true)}
        >
          mango 선택
        </ActionButton>
        <ActionButton type="submit" flexGrow={1}>
          제출
        </ActionButton>
      </HStack>
    </VStack>
  );
}