Installation
bash
npx axis-cli add checkboxUsage
tsx
import { Checkbox, Label } from '@axis-ds/ui-react'
export function Example() {
return (
<div className="flex items-center space-x-2">
<Checkbox id="terms" />
<Label htmlFor="terms">이용약관에 동의합니다</Label>
</div>
)
}Disabled
tsx
<div className="flex items-center space-x-2">
<Checkbox id="disabled" disabled />
<Label htmlFor="disabled" className="text-muted-foreground">
비활성화된 체크박스
</Label>
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
checked | boolean | "indeterminate" | - | 체크 상태 (controlled) |
defaultChecked | boolean | - | 기본 체크 상태 |
onCheckedChange | (checked: boolean | "indeterminate") => void | - | 체크 상태 변경 콜백 |
disabled | boolean | false | 비활성화 여부 |
required | boolean | false | 필수 입력 여부 |
name | string | - | 폼 필드 이름 |
value | string | "on" | 폼 제출 값 |
checkedType:
boolean | "indeterminate"Default:
-체크 상태 (controlled)
defaultCheckedType:
booleanDefault:
-기본 체크 상태
onCheckedChangeType:
(checked: boolean | "indeterminate") => voidDefault:
-체크 상태 변경 콜백
disabledType:
booleanDefault:
false비활성화 여부
requiredType:
booleanDefault:
false필수 입력 여부
nameType:
stringDefault:
-폼 필드 이름
valueType:
stringDefault:
"on"폼 제출 값