Checkbox
선택 가능한 체크박스 컴포넌트입니다.
설치
Terminal
npx @msub-core/ui-cli add checkbox
사용법
TSX
import { Checkbox } from "@msub-core/ui/components/checkbox"
function MyComponent() {
const [checked, setChecked] = useState(false)
return (
<Checkbox
label="약관에 동의합니다"
checked={checked}
onChange={setChecked}
/>
)
}Checkbox Props
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| label | string | - | No | 체크박스 라벨 |
| description | string | - | No | 라벨 아래 설명 텍스트 |
| size | "sm" | "default" | "lg" | "default" | No | 체크박스 및 라벨 크기 |
| variant | "outline" | "filled" | "outline" | No | 체크박스 스타일 변형 |
| checked | boolean | - | No | 체크 상태 (controlled) |
| defaultChecked | boolean | - | No | 기본 체크 상태 (uncontrolled) |
| indeterminate | boolean | false | No | 중간 상태 (전체 선택 등에서 사용) |
| disabled | boolean | false | No | 비활성화 상태 |
| onChange | (checked: boolean) => void | - | No | 체크 상태 변경 핸들러 |
CheckboxGroup Props
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| children | ReactNode | - | Yes | 자식 체크박스들 |
| label | string | - | No | 그룹 라벨 |
| description | string | - | No | 그룹 설명 |
| horizontal | boolean | false | No | 가로 배치 여부 |
기본
Variants
Outline (기본값)
Filled
Sizes
설명 텍스트
이벤트, 프로모션 등 마케팅 정보를 받아보실 수 있습니다.
서비스 이용을 위해 필수로 동의해주세요.
상태
전체 선택 (Indeterminate)
CheckboxGroup
알림 설정받고 싶은 알림을 선택하세요
관심 분야 (가로)
실제 사용 예시
약관 동의
이벤트, 프로모션 정보를 받아보세요