Checkbox

사용자가 하나 이상의 옵션을 선택할 수 있게 해주는 컴포넌트입니다. 목록에서 여러 항목을 선택하거나 약관 동의와 같은 선택적 작업에 사용됩니다.

Hello World

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

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

Installation

npx @seed-design/cli@latest add ui:checkbox

Examples

Sizes

Medium (default)Large

import { HStack, VStack } from "@seed-design/react";
import { Checkbox } from "seed-design/ui/checkbox";

export default function CheckboxSize() {
  return (
    <HStack gap="x8">
      <VStack gap="x2">
        <Checkbox label="Medium (default)" size="medium" defaultChecked />
        <Checkbox label="Large" size="large" defaultChecked />
      </VStack>
      <VStack gap="x2">
        <Checkbox label="Medium (default)" size="medium" variant="ghost" defaultChecked />
        <Checkbox label="Large" size="large" variant="ghost" defaultChecked />
      </VStack>
    </HStack>
  );
}

Tones and Variants

Brand

Square (default)Ghost

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

export default function CheckboxBrand() {
  return (
    <VStack gap="x2">
      <Checkbox label="Square (default)" variant="square" tone="brand" defaultChecked />
      <Checkbox label="Ghost" variant="ghost" tone="brand" defaultChecked />
    </VStack>
  );
}

Neutral

Square (default)Ghost

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

export default function CheckboxNeutral() {
  return (
    <VStack gap="x2">
      <Checkbox label="Square (default)" variant="square" tone="neutral" defaultChecked />
      <Checkbox label="Ghost" variant="ghost" tone="neutral" defaultChecked />
    </VStack>
  );
}

Indeterminate

indeterminate

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

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

Weights

Deprecated Props

weight="default"와 weight="stronger"는 더 이상 사용되지 않습니다. 대신 weight="regular"와 weight="bold"를 사용하세요.

Regular Label TextBold Label Text

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

export default function CheckboxWeights() {
  return (
    <VStack gap="x4">
      <Checkbox label="Regular Label Text" weight="regular" />
      <Checkbox label="Bold Label Text" weight="bold" />
    </VStack>
  );
}

Consequat ut veniam aliqua deserunt occaecat enim occaecat veniam et et cillum nulla officia incididunt incididunt. Sint laboris labore occaecat fugiat culpa voluptate ullamco in elit dolore exercitation nulla.Consequat ut veniam aliqua deserunt occaecat enim occaecat veniam et et cillum nulla officia incididunt incididunt. Sint laboris labore occaecat fugiat culpa voluptate ullamco in elit dolore exercitation nulla.

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

export default function CheckboxLongLabel() {
  return (
    <VStack gap="x2">
      <Checkbox
        size="medium"
        label="Consequat ut veniam aliqua deserunt occaecat enim occaecat veniam et et cillum nulla officia incididunt incididunt. Sint laboris labore occaecat fugiat culpa voluptate ullamco in elit dolore exercitation nulla."
      />
      <Checkbox
        size="large"
        label="Consequat ut veniam aliqua deserunt occaecat enim occaecat veniam et et cillum nulla officia incididunt incididunt. Sint laboris labore occaecat fugiat culpa voluptate ullamco in elit dolore exercitation nulla."
      />
    </VStack>
  );
}

Disabled

Disabled Checked, SquareDisabled without Checked, SquareDisabled Checked, GhostDisabled without Checked, Ghost

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

export default function CheckboxDisabled() {
  return (
    <VStack gap="x2">
      <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 />
    </VStack>
  );
}

Use Cases

React Hook Form

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>
  );
}

Using `Checkmark`

Checkmark는 독립적인 체크 마크 컴포넌트로, 커스텀 레이아웃을 위해 사용할 수 있습니다.

regularmediumbold

import { HStack, Text, VStack } from "@seed-design/react";
import { Checkbox } from "@seed-design/react/primitive";
import { Checkmark } from "seed-design/ui/checkbox";

function CustomCheckbox({ children, ...props }: Checkbox.RootProps) {
  return (
    <VStack asChild gap="x2" align="center">
      <Checkbox.Root {...props}>
        <Checkmark />
        <Checkbox.HiddenInput />
        {children}
      </Checkbox.Root>
    </VStack>
  );
}

export default function CheckboxCheckmark() {
  return (
    <HStack gap="x6">
      <CustomCheckbox>
        <Text textStyle="t7Regular">regular</Text>
      </CustomCheckbox>
      <CustomCheckbox defaultChecked>
        <Text textStyle="t7Medium">medium</Text>
      </CustomCheckbox>
      <CustomCheckbox>
        <Text textStyle="t7Bold">bold</Text>
      </CustomCheckbox>
    </HStack>
  );
}

Last updated on

Checkbox

Installation

Props

`Checkbox`

`Checkmark`

Examples

Sizes

Tones and Variants

Brand

Neutral

Indeterminate

Weights

Long Label

Disabled

Use Cases

React Hook Form

Using `Checkmark`

On this page

Checkbox

Manual Installation

On this page