컴포넌트FOX · Checkbox

체크박스

여러 보기 중 원하는 만큼 고르거나, 동의처럼 하나를 켜고 끄는 선택이에요. 고른 뒤 확인 버튼을 눌러야 적용돼요.

크기

라벨 글자 크기로 세 단계를 나눠요. primary 17, secondary 15, tertiary 13px이에요. 묶음의 대표 항목은 크게, 세부 항목은 작게 써요.

VARIANTS

전체 선택알림 받기자세히 보기

<Checkbox variant="primary">전체 선택</Checkbox>
<Checkbox variant="secondary">알림 받기</Checkbox>
<Checkbox variant="tertiary">자세히 보기</Checkbox>

상태

STATES

<Checkbox indeterminate>일부 선택</Checkbox>
<Checkbox error>꼭 확인해 주세요</Checkbox>

전체 동의

아래 항목을 모두 고르면 전체 동의가 켜지고, 일부만 고르면 가운데 줄이 떠요. 전체 동의를 누르면 아래 항목이 한꺼번에 바뀌어요.

CHECKBOX GROUP

전체 동의

서비스 이용약관 (필수)개인정보 수집과 이용 (필수)마케팅 정보 받기 (선택)

const all = checked.every(Boolean);
const some = checked.some(Boolean);

<Checkbox variant="primary" checked={all} indeterminate={some && !all}
  onChange={(e) => setAll(e.target.checked)}>전체 동의</Checkbox>
{items.map((t, i) => (
  <Checkbox key={t} variant="tertiary" checked={checked[i]}
    onChange={(e) => setOne(i, e.target.checked)}>{t}</Checkbox>
))}

이렇게 써요

약관에 동의해요

이렇게라벨은 켰을 때의 뜻을 짧은 문장으로 써요. 라벨을 누르는 것도 선택이에요.

동의 안 함

이렇게 말고부정문 라벨은 켰는지 껐는지 헷갈려요.

필수 약관에 동의해 주세요

이렇게오류는 빨간 테두리와 함께 무엇을 해야 하는지 글로 알려요.

오류

이렇게 말고「오류」만 쓰면 무엇을 고쳐야 할지 몰라요.

속성

속성	값	기본값	설명
`variant`	"primary" \| "secondary" \| "tertiary"	`secondary`	라벨 17, 15, 13px
`checked / defaultChecked`	boolean	없음	선택 여부(제어, 비제어)
`onChange`	ChangeEventHandler	없음	e.target.checked로 값을 읽는다
`indeterminate`	boolean	`false`	일부만 골랐을 때의 가운데 줄 표시
`error`	boolean	`false`	빨간 테두리와 빨간 라벨
`disabled`	boolean	`false`	누를 수 없는 상태