Checkbox

체크박스 컴포넌트는 선택/해제 상태를 나타내는 폼 요소입니다.

기본 사용법

체크박스 예제

체크된 상태 (비활성화)

import Checkbox from '@aift/ui/Checkbox';

export default function Preview() {
  return (
    <div className="space-y-4">
      <div className="flex items-center gap-2">
        <Checkbox id="checkbox-1" />
        <label htmlFor="checkbox-1" className="text-sm">체크박스 예제</label>
      </div>
      <div className="flex items-center gap-2">
        <Checkbox id="checkbox-2" checked disabled />
        <label htmlFor="checkbox-2" className="text-sm">체크된 상태 (비활성화)</label>
      </div>
    </div>
  );
}

import Checkbox from '@aift/ui/Checkbox';export default function Preview() {  return (    <div className="space-y-4">      <div className="flex items-center gap-2">        <Checkbox id="checkbox-1" />        <label htmlFor="checkbox-1" className="text-sm">체크박스 예제</label>      </div>      <div className="flex items-center gap-2">        <Checkbox id="checkbox-2" checked disabled />        <label htmlFor="checkbox-2" className="text-sm">체크된 상태 (비활성화)</label>      </div>    </div>  );}

Props

Prop	Type	Default	Description
checked	`boolean`	`false`	체크 상태
onCheckedChange	`(checked: boolean) => void`	-	체크 상태 변경 핸들러
disabled	`boolean`	`false`	비활성화 여부
id	`string`	-	체크박스 ID

Checkbox

Checkbox

기본 사용법

Props

On this page