Checkbox

네이티브 체크박스입니다. children이 보이는 레이블입니다. indeterminate 상태는 없습니다.

checked가 정의되어 있으면 제어 컴포넌트입니다. defaultChecked를 넘기거나 둘 다 생략하면 비제어 컴포넌트입니다. useControlledState는 onCheckedChange를 실행하지 않습니다. 컴포넌트가 실행합니다.

<Checkbox defaultChecked>Product updates</Checkbox>
<Checkbox checked={accepted} onCheckedChange={setAccepted} invalid={invalid} aria-describedby={errorId}>
	I accept the terms
</Checkbox>

Product updatesArchived list

I accept the termsAccept the terms to continue.

Checkbox를 Field.Root 안에 넣지 마세요. 그 셸은 텍스트와 칩 입력용입니다. 체크박스 아래에 Description이나 ErrorMessage가 있으면 체크박스에 aria-describedby를 연결하세요.

늘 보이는 배타적 선택에는 Radio를 쓰세요. 오버레이 목록에는 OptionList를 쓰세요.

언제 쓰나요

언제: 페이지에 계속 남는 독립적인 켜기/끄기. children = 보이는 레이블.

쓰지 않을 때: 여럿 중 하나만 고르는 배타적 선택 → Radio. 즉시 적용되는 설정 토글 모양 → Switch. 오버레이 다중 선택 → OptionList selectionMode="multiple". Field.Root 안.

Props

Checkbox props
이름	타입	필수	기본값	설명
children	`React.ReactNode`	예	—	보이는 레이블. 텍스트를 클릭하면 입력이 토글됩니다.
checked	`boolean`	아니요	—	제어 체크 상태. 값이 정의되어 있으면 제어 방식입니다.
defaultChecked	`boolean`	아니요	—	비제어일 때의 초기 체크 상태.
onCheckedChange	`(checked: boolean) => void`	아니요	—	체크 상태가 바뀐 뒤 호출됩니다.
disabled	`boolean`	아니요	—	입력을 비활성화합니다.
invalid	`boolean`	아니요	—	컨트롤을 유효하지 않음으로 표시하고 aria-invalid를 설정합니다.
name	`string`	아니요	—	네이티브 입력 name.
value	`string`	아니요	—	네이티브 입력 value.
className	`string`	아니요	—	감싸는 label에 붙는 선택적 클래스.