Checkbox
여러 옵션 중 하나 이상을 선택할 수 있는 체크박스 컴포넌트입니다.
import { Checkbox } from 'sud-ui';사용할 때
여러 옵션 중 하나 이상을 선택할 때
사용자의 선택이나 결정을 확인할 때
사용예제
Basic Usage
기본적인 사용 방법입니다.
Default Checked Checkbox
기본 선택된 체크박스입니다.
disable option Checkbox
비활성화된 옵션을 포함한 체크박스 그룹입니다.
Color Type Checkbox
체크박스 버튼의 색상 타입입니다.
Disabled Checkbox
비활성화된 체크박스입니다.
Checkbox Group
체크박스 그룹입니다.
Label Position
라벨의 위치를 설정합니다.
사용 방법
컴포넌트의 props를 설정하는 방법입니다.
| checked | 체크박스의 선택 상태 (제어 컴포넌트) | boolean | - |
| defaultChecked | 체크박스의 초기 선택 상태 (비제어 컴포넌트) | boolean | false |
| children | 체크박스 라벨 | ReactNode | - |
| name | 폼 제출에 사용할 이름 | string | - |
| value | 폼 제출에 사용할 값 | string | number | - |
| required | 필수 입력 여부 | boolean | false |
| onChange | 선택 상태가 변경될 때 호출되는 함수 (checked: boolean) => void | (checked: boolean) => void | - |
| labelPosition | 라벨의 위치 | left | right | top | bottom | right |
| color | 체크박스의 색상(palette값 또는 HEX code) | string | - |
| disabled | 비활성화 여부 | boolean | false |
| colorType | 체크박스의 색상 타입 | default | primary | success | warning | danger | info | red | rose | coral | orange | volcano | apricot | yellow | gold | amber | green | lime | mint | blue | sky | cerulean | indigo | cobalt | navy | purple | plum | orchid | forest | sage | warm-gray | cool-gray | neutral | text | ghost | primary |
| className | 추가 클래스명 | string | "" |
| style | 추가 스타일 | CSSProperties | {} |
| ariaLabel | ARIA 라벨 | string | - |
| ariaRequired | ARIA required 속성 | boolean | - |
| ariaInvalid | ARIA invalid 속성 | boolean | - |
| ariaDescribedby | ARIA describedby 속성 | string | - |
Checkbox.Group
| options | 체크박스 그룹의 옵션 배열 | Array<{label: ReactNode, value: string | number, disabled?: boolean}> | [] |
| value | 선택된 값들의 배열 | (string | number)[] | [] |
| onChange | 선택 상태가 변경될 때 호출되는 함수 (values: (string | number)[]) => void | (values: (string | number)[]) => void | - |
| layout | 레이아웃 타입 | flex | grid | flex |
| direction | 배치 방향 | horizontal | vertical | vertical |
| cols | 그리드 레이아웃의 열 수 | number | 1 |
| gap | 체크박스 간의 간격 | number | 8 |
| disabled | 전체 그룹 비활성화 여부 | boolean | false |
| itemDisabled | 비활성화할 체크박스 값들의 배열 | (string | number)[] | [] |
| color | 체크박스의 색상(palette값 또는 HEX code) | string | - |
| colorType | 체크박스의 색상 타입 | default | primary | success | warning | danger | info | red | rose | coral | orange | volcano | apricot | yellow | gold | amber | green | lime | mint | blue | sky | cerulean | indigo | cobalt | navy | purple | plum | orchid | forest | sage | warm-gray | cool-gray | neutral | text | ghost | primary |
| labelPosition | 라벨의 위치 | left | right | top | bottom | right |
| ariaLabel | ARIA 라벨 | string | - |
| ariaRequired | ARIA required 속성 | boolean | - |
| name | 체크박스 그룹의 이름 | string | - |
| role | ARIA role | string | group |
| className | 추가 클래스명 | string | "" |
| style | 추가 스타일 | CSSProperties | {} |