Pantoia Design
Components

Switch

사용 예시

이름 붙이기

Switch에는 글자가 없어서 라벨이 따로 필요해요. Field로 감싸면 라벨이 Switch의 이름이 돼요.

주문 상태가 바뀌면 알려 드려요.

tsx
<Field>  <FieldLabel>주문 알림 받기</FieldLabel>  <Switch checked={orderAlert} onCheckedChange={setOrderAlert} />  <FieldHelp>주문 상태가 바뀌면 알려 드려요.</FieldHelp></Field>
tsx
<Field layout="split">  <FieldLabel>진동으로 알리기</FieldLabel>  <Switch checked={vibrate} onCheckedChange={setVibrate} /></Field>
tsx
<div className="flex items-center justify-between">  <span className="text-label">진동으로 알리기</span>  <Switch checked={vibrate} onCheckedChange={setVibrate} /></div>

설정 목록

설정 항목이 여러 개일 때 Switch를 오른쪽 끝에 맞춰 정렬해요.

tsx
<Field layout="split">  <FieldLabel>광고 알림 받기</FieldLabel>  <Switch checked={rowAd} onCheckedChange={setRowAd} /></Field>

즉시 반영

적용 버튼이 따로 없을 때 써요.

128,000원

tsx
<Field layout="split">  <FieldLabel>금액 가리기</FieldLabel>  <Switch checked={hideAmount} onCheckedChange={setHideAmount} /></Field><p className="text-section">{hideAmount ? '••••••' : '128,000원'}</p>

켜야 나타나는 설정

Switch를 켰을 때만 쓰는 하위 설정이 있을 때 써요. 꺼져 있는 동안에는 하위 설정이 공간을 차지하지 않아요.

tsx
<Field layout="split">  <FieldLabel>다시 알림</FieldLabel>  <Switch checked={snooze} onCheckedChange={setSnooze} /></Field>{snooze && (  <Field layout="split">    <FieldLabel>다시 알림 간격(분)</FieldLabel>    <NumberField      value={snoozeAfter}      onValueChange={v => setSnoozeAfter(v ?? 5)}      min={5}      max={60}      step={5}      size="sm"      className="w-32"      decrementLabel="간격 줄이기"      incrementLabel="간격 늘리기"    />  </Field>)}

비활성

비활성인 이유를 도움말에 함께 적어요. 비활성이어도 트랙 색으로 켜짐과 꺼짐을 알 수 있어요.

기기 설정에서 알림을 켜야 받을 수 있어요.

tsx
<Field layout="split">  <FieldLabel>주문 알림 받기</FieldLabel>  <Switch disabled />  <FieldHelp>기기 설정에서 알림을 켜야 받을 수 있어요.</FieldHelp></Field>

컨트롤

값true
tsx
<Field layout="split">  <FieldLabel>위치 정보 사용</FieldLabel>  <Switch checked={useLocation} onCheckedChange={setUseLocation} /></Field>

명세

이름
이름값기본
checkedboolean-
호출하는 쪽에서 켜짐 상태를 관리해요.
defaultCheckedbooleanfalse
처음에 켜 둘지 정해요.
onCheckedChange(checked: boolean, eventDetails) => void-
켜지거나 꺼지면 호출돼요.
colorneutral, info, success, warning, dangerneutral
의미에 맞는 색이 있을 때만 바꿔요.
disabledbooleanfalse
aria-labelledbystring-
이름이 되는 요소의 id예요.
classNamestring-