dodam dodam logo

B1ND Docs

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 (
<Checkbox
selected={selected}
onClick={() => setSelected((prev) => !prev)}
disabled={false}
type="primay"
size="medium"
checkboxCustomStyle={{
zIndex: 1,
}}
/>
);
}

Props

PropTypeDefaultDescription
size"medium" | "small""medium"체크박스의 크기
selectedboolean-체크박스 선택 여부
onClick() => void-체크박스 클릭 이벤트
disabledbooleanfalse체크박스 비활성 여부
type"primary" | "error""primary"체크박스 배경 색상
variant"outlined" | "filled""filled"체크박스 스타일 (outlined: 보더 없이 체크마크만)
display"inline" | "full""inline"체크박스 너비 모드 (inline: 고정 크기, full: 부모 너비에 꽉 채움)
checkboxCustomStyleCSSObject{}체크박스 커스텀 CSS