본문으로 건너뛰기

Checkbox

서로 독립적인 항목을 선택하고 해제.

출시 화면에서 사용

개요

미리보기

예시 언어동작 줄이기

Google 캘린더 일정 읽기

예시

상태

꺼짐
Google 캘린더 일정 읽기
켜짐
Google 캘린더 일정 읽기
일부
Google 캘린더 일정 읽기
비활성
Google 캘린더 일정 읽기
오류
개인정보 처리방침에 동의합니다
계속하려면 동의가 필요해요.
도움말
Google 캘린더 일정 읽기
일정 제목과 시간만 읽어요. 본문은 읽지 않아요.
가장 긴 문구 (es)
공유 캘린더의 일정도 읽기

이렇게 · 이렇게 하지 않기

이렇게 각 선택이 서로 독립적일 때 쓴다. 동의 항목을 미리 체크해 두지 않는다. 여러 행 선택에서 일부만 고르면 mixed 상태를 쓴다.
이렇게 라벨은 켜면 일어나는 일을 말한다.
이렇게 약관 링크는 라벨 밖 별도 Tab 정지점으로 둔다. 링크를 눌러도 체크가 바뀌지 않는다.
이렇게 하지 않기 즉시 적용되는 설정에는 Switch를 쓴다. 체크박스는 제출과 함께 적용된다.

토큰과 속성

이름	타입	기본값	설명
`label`	`ReactNode`	`Google 캘린더 일정 읽기`	항상 보이는 라벨(<label for> 또는 <legend>). placeholder로 대신하지 않는다.
`hint?`	`ReactNode`		상시 도움말. FieldMessage로 그리고 aria-describedby의 첫 번째로 연결한다. 비우면 없음.
`error?`	`ReactNode`		오류 문장. 있으면 aria-invalid="true". 오류 노드는 항상 마운트되어 있고 내용만 바뀐다.
`required?`	`boolean`	`false`	required 속성과 함께 라벨 옆에 “필수” 텍스트를 보인다(별표만 쓰지 않음).
`disabled?`	`boolean`	`false`	Tab에서 빠지고 제출되지 않는다. 값을 보여 줘야 하면 readOnly를 쓴다.
`defaultChecked?`	`boolean`	`false`	비제어 초기 상태. 제어하려면 checked + onChange(네이티브).
`withLabel?`	`boolean`	`true`	false면 컨트롤만 그린다. 이미 이 컨트롤을 감싸는 <label>이 있을 때(ListRow kind="control") 쓴다. 그때 label·hint·error는 그리지 않고, 이름은 바깥 label이 준다. label을 중첩하지 않는다.
`indeterminate?`	`boolean`	`false`	일부 선택(mixed). DOM 속성으로 설정되어 스크린리더가 “혼합”으로 읽는다.
`ref`	—	—	ref는 <input type="checkbox">로 전달된다.
그 밖의 속성	—	—	name, value, defaultValue, onChange, onBlur, autoComplete, aria-* 등 네이티브 속성은 입력 요소로 전달된다. id를 주면 라벨 연결에 그 id를 쓴다. className·style은 받지 않는다.