Pantoia Design
Components

Checkbox

사용 예시

옵션

Field로 감싸면 라벨이 연결돼서 라벨을 눌러도 체크돼요.

tsx
<Field layout="inline">  <Checkbox checked={emailReceipt} onCheckedChange={setEmailReceipt} />  <FieldLabel>주문 내역을 이메일로 받기</FieldLabel></Field>

여러 항목 고르기

여러 Checkbox의 값을 배열 하나로 관리할 때 CheckboxGroup으로 감싸요. 그 안에서는 화살표 키로도 Checkbox 사이를 이동할 수 있어요.

channels = ["push"]

tsx
<CheckboxGroup value={channels} onValueChange={setChannels}>  <Field layout="inline">    <Checkbox value="email" />    <FieldLabel>이메일</FieldLabel>  </Field>  <Field layout="inline">    <Checkbox value="sms" />    <FieldLabel>문자</FieldLabel>  </Field>  <Field layout="inline">    <Checkbox value="push" />    <FieldLabel>앱 알림</FieldLabel>  </Field></CheckboxGroup>

모두 고르기

checked와 indeterminate는 하위 항목의 상태로 계산해서 따로 넘겨요. 상위 Checkbox를 누르면 하위 항목을 한꺼번에 바꿔요.

tsx
<Field layout="inline">  <Checkbox    checked={allTerms}    indeterminate={someTerms}    onCheckedChange={setAllTerms}  />  <FieldLabel>전체 동의</FieldLabel></Field>{terms.map(term => (  <Field key={term.label} layout="inline" className="pl-9">    <Checkbox checked={term.on} onCheckedChange={on => setTerm(term.label, on)} />    <FieldLabel>{term.label}</FieldLabel>  </Field>))}

틀린 값

색만으로 알리지 말고 해야 할 일을 FieldError로 함께 적어요.

체크해야 지울 수 있어요.

tsx
<Field layout="inline" invalid={!confirmed}>  <Checkbox checked={confirmed} onCheckedChange={setConfirmed} />  <FieldLabel>되돌릴 수 없음 확인</FieldLabel>  {!confirmed && <FieldError>체크해야 지울 수 있어요.</FieldError>}</Field>

다음에 열 때 다시 로그인하지 않아요.

다음에 열 때 다시 로그인하지 않아요.

비활성

조건이 맞지 않아 고를 수 없는 항목은 숨기지 말고 비활성으로 둬요.

tsx
<Field layout="inline">  <Checkbox checked={autoRenew} onCheckedChange={setAutoRenew} />  <FieldLabel>자동 갱신</FieldLabel></Field><Field layout="inline">  <Checkbox checked={renewNotice} onCheckedChange={setRenewNotice} disabled={!autoRenew} />  <FieldLabel>갱신 하루 전에 알리기</FieldLabel></Field>

컨트롤

값["email"]
tsx
<Field layout="inline">  <Checkbox    checked={allChannels}    indeterminate={someChannels}    onCheckedChange={setAll}  />  <FieldLabel>모두 받기</FieldLabel></Field><CheckboxGroup value={channels} onValueChange={setChannels}>  <Field layout="inline">    <Checkbox value="email" />    <FieldLabel>이메일</FieldLabel>  </Field></CheckboxGroup>

명세

이름
이름값기본
CheckboxGroup
valuestring[]-
호출하는 쪽에서 체크한 값을 관리해요. 순서는 체크한 순서예요.
defaultValuestring[]빈 배열
처음 값이에요.
onValueChange(value: string[], eventDetails) => void-
체크한 값이 바뀌면 호출돼요.
disabledbooleanfalse
안의 Checkbox가 모두 비활성이 돼요.
classNamestring-
모든 하위 컴포넌트에 쓸 수 있어요.
Checkbox
checkedboolean-
호출하는 쪽에서 체크 상태를 관리해요.
defaultCheckedbooleanfalse
처음에 체크해 둘지 정해요.
onCheckedChange(checked: boolean, eventDetails) => void-
체크 상태가 바뀌면 호출돼요.
indeterminatebooleanfalse
체크 표시 대신 가로 막대가 보여요.
valuestring-
CheckboxGroup 안에서 체크하면 배열에 추가되는 값이에요.
colorneutral, info, success, warning, dangerneutral
의미에 맞는 색이 있을 때만 바꿔요.
disabledbooleanfalse