Checkbox
여러 개를 고를 수 있을 때 써요. 일부만 선택된 상위 항목은 indeterminate예요.
변형
Figma 원본의 모든 variant예요. hover, focus는 컴포넌트가 처리해서 따로 그리지 않아요.
default
disabled
checked
checked · disabled
indeterminate
indeterminate · disabled
사용법
- 저장 버튼이 있는 폼에서 써요누르는 즉시 적용되는 설정이면 Switch를 써요.
- 그룹은 fieldsetlegend(label 스타일)와 항목 사이 space/3, 항목 사이 space/2.
Props
| prop | 값 | 기본값 |
|---|---|---|
| checked | 제어 모드 | — |
| indeterminate | boolean (화면 낭독기에는 mixed) | false |
| disabled | boolean | false |
| CheckboxGroup | label, value(string[]), onValueChange | — |
코드
tsx
<CheckboxGroup label="알림 채널" value={channels} onValueChange={setChannels}>
<Checkbox value="email">이메일</Checkbox>
<Checkbox value="push">푸시</Checkbox>
</CheckboxGroup>