1. CheckBox

CheckBox 컴포넌트는 사용자가 선택할 수 있는 체크박스를 생성하기 위해 사용됩니다.

다양한 크기, 색상, 변형 및 기타 옵션을 통해 다양한 스타일의 체크박스를 구현할 수 있습니다.

1.1. Import

import { CheckBox } from '@components/CheckBox';

1.2. Usage

기본 사용 예제는 아래와 같습니다:

import { CheckBox } from '@components/CheckBox';

function Example() {
  return (
    <CheckBox description="Example CheckBox" />
  );
}

export default Example;

3. Size

boxSize prop을 이용하여 체크박스의 크기를 설정할 수 있습니다. 가능한 값은 small, medium,large입니다.

import { CheckBox } from '@components/CheckBox';

function Example() {
  return (
    <>
      <CheckBox boxSize="small" description="Small CheckBox" />
      <CheckBox boxSize="medium" description="Medium CheckBox" />
      <CheckBox boxSize="large" description="Large CheckBox" />
    </>
  );
}

export default Example;

4. Color

color prop을 이용하여 체크박스의 색상을 설정할 수 있습니다.

가능한 값은 primary, secondary,success, warning, danger, red, orange, yellow, green, blue, purple, pink, basic입니다.

import { CheckBox } from '@components/CheckBox';

function Example() {
  return (
    <>
      <CheckBox description="Primary CheckBox" color="primary" />
      <CheckBox description="Secondary CheckBox" color="secondary" />
      <CheckBox description="Success CheckBox" color="success" />
      <CheckBox description="Warning CheckBox" color="warning" />
      <CheckBox description="Danger CheckBox" color="danger" />
    </>
  );
}

export default Example;

5. Variant

variant prop을 이용하여 체크박스의 스타일 변형을 설정할 수 있습니다.

가능한 값은 solid와 border입니다.

import { CheckBox } from '@components/CheckBox';

function Example() {
  return (
    <>
      <CheckBox description="Solid CheckBox" variant="solid" />
      <CheckBox description="Border CheckBox" variant="border" />
    </>
  );
}

export default Example;

6. Variant Border의 Color

variant prop을 이용하여 체크박스의 스타일 변형을 설정할 수 있습니다.

border 스타일은 체크박스의 테두리만 색상이 적용되며, 체크된 상태일 때 테두리 색상이 강조됩니다.

import { CheckBox } from '@components/CheckBox';

function Example() {
  return (
    <>
      <CheckBox description="Primary CheckBox (Border)" color="primary" variant="border" />
      <CheckBox description="Secondary CheckBox (Border)" color="secondary" variant="border" />
      <CheckBox description="Success CheckBox (Border)" color="success" variant="border" />
      <CheckBox description="Warning CheckBox (Border)" color="warning" variant="border" />
      <CheckBox description="Danger CheckBox (Border)" color="danger" variant="border" />
    </>
  );
}

export default Example;

7. Disabled

disabled prop을 이용하여 체크박스를 비활성화할 수 있습니다.

import { CheckBox } from '@components/CheckBox';

function Example() {
  return (
    <CheckBox description="Disabled CheckBox" disabled={true} />
  );
}

export default Example;

8. ClassName

className prop을 사용하여 CheckBox 컴포넌트의 스타일을 커스터마이징할 수 있습니다.

아래 예시는 체크하면 빨간색 배경이 되도록 커스터마이징한 것입니다.

import { CheckBox } from '@components/CheckBox';

function Example() {
  return (
    <CheckBox
      variant="border"
      color="basic"
      className="checked:!bg-red-500"
      description="Custom ClassName CheckBox"
    />
  );
}

export default Example;

9. Props

CheckBox 컴포넌트는 아래와 같은 Props를 가집니다:

Prop	Description	Type	Default
`boxSize`	CheckBox의 크기를 설정합니다.	`"small" \| "medium" \| "large"`	`"medium"`
`color`	CheckBox의 색상을 설정합니다.	`"primary" \| "secondary" \| "success" \| "warning" \| "danger" \| "red" \| "orange" \| "yellow" \| "green" \| "blue" \| "purple" \| "pink" \| "basic"`	`"basic"`
`variant`	CheckBox의 스타일 변형을 설정합니다.	`"solid" \| "border"`	`"solid"`
`description`	CheckBox 옆에 표시되는 설명 텍스트입니다.	`string`	`undefined`
`className`	CheckBox의 추가 스타일을 설정합니다.	`string`	`""`
`disabled`	CheckBox를 비활성화 상태로 만듭니다.	`boolean`	`false`
`onChange`	CheckBox의 상태가 변경될 때 호출되는 핸들러입니다.	`(e: React.ChangeEvent<HTMLInputElement>) => void`	`undefined`