Checkbox
활성 / 비활성 상태로 나뉘는 체크박스입니다.
Preview
variant - filled (default)
variant - outlined
display - inline (default)
display - full
Usage
tsx
import { Checkbox, CheckboxProps } from "@b1nd/dodam-design-system/components";import { useState } from "react";export default function Example() {const [selected, setSelected] = useState(false);return (<Checkboxselected={selected}onClick={() => setSelected((prev) => !prev)}disabled={false}type="primay"size="medium"checkboxCustomStyle={{zIndex: 1,}}/>);}
Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | "medium" | "small" | "medium" | 체크박스의 크기 |
selected | boolean | - | 체크박스 선택 여부 |
onClick | () => void | - | 체크박스 클릭 이벤트 |
disabled | boolean | false | 체크박스 비활성 여부 |
type | "primary" | "error" | "primary" | 체크박스 배경 색상 |
variant | "outlined" | "filled" | "filled" | 체크박스 스타일 (outlined: 보더 없이 체크마크만) |
display | "inline" | "full" | "inline" | 체크박스 너비 모드 (inline: 고정 크기, full: 부모 너비에 꽉 채움) |
checkboxCustomStyle | CSSObject | {} | 체크박스 커스텀 CSS |