Toggle
켜짐/꺼짐을 바로 전환해요. 설정 화면의 옵션 on/off 에 써요.
Anatomy
- 01Track배경 트랙. ON 은 --color-accent-normal, OFF 는 #e5e7eb(팔레트 미등재, 디자인 확인 필요)
- 02Thumb흰 원형 손잡이. 전환 시 좌우로 움직여요
- 03Label · Description (선택)토글 오른쪽 레이블과 설명
Properties
Base
ON / OFF / Disabled 세 상태예요. Disabled 는 투명도 38% 이고, 컴포넌트마다 다른 건 의도예요.
| State | Preview | Track 색상 | 설명 |
|---|---|---|---|
| ON | --color-accent-normal #1d7ff9 | 활성화 상태 | |
| OFF | #e5e7eb | 비활성화 상태. ⚠️ #e5e7eb 는 팔레트 미등재 값(디자인 확인 필요) | |
| Disabled | #e5e7eb + opacity 38% | 인터랙션 불가 |
Case
01
Toggle 단독
레이블 없이 토글만 배치해요. 맥락이 이미 분명한 자리에 써요.
02
Toggle + Label
무엇을 켜고 끄는지 레이블로 밝혀요.
03
Toggle + Label + Description
레이블만으로 결과를 짐작하기 어려울 때 설명을 덧붙여요.
Guidelines
- 전환 결과가 바로 반영되는 설정에만 써요. 저장 버튼이 따로 있는 폼은 Checkbox 예요.
- 맥락이 분명하면 단독, 아니면 Label, 결과를 짐작하기 어려우면 Description 까지 붙여요.
- Disabled 는 투명도 38% 예요. 컴포넌트마다 다른 건 의도예요.
Specification
Size
| Size | Width | Height | Thumb | Thumb Offset |
|---|---|---|---|---|
| md | 52px | 30px | 24px | 3px |
| sm | 40px | 24px | 18px | 3px |
Token
| 속성 | Token | Value |
|---|---|---|
| Track ON | --color-accent-normal | #1d7ff9 |
| Track OFF | — (팔레트 미등재) | #e5e7eb |
| Thumb | --color-static-white | #ffffff |
| Disabled opacity | — | 38% |
| border-radius | --radius-full | 999px |
| transition | — | background 0.2s |
설치
npm i @polarisoffice/pds-reactBase
ON / OFF / Disabled 세 가지 상태.
import { Toggle } from '@polarisoffice/pds-react';
<Toggle checked />
<Toggle />
<Toggle disabled />Size
md · sm 두 단계. md(52px×30px) · sm(40px×24px)
import { Toggle } from '@polarisoffice/pds-react';
<Toggle size="md" checked />
<Toggle size="sm" checked />Label · Description
무엇을 켜고 끄는지 밝혀야 하면 레이블을, 결과를 짐작하기 어려우면 설명을 붙여요.
import { Toggle } from '@polarisoffice/pds-react';
<Toggle label="알림 받기" checked />
<Toggle label="푸시 알림" description="앱 알림을 받을 수 있습니다" />Controlled
상태를 바깥에서 관리할 때.
import { Toggle } from '@polarisoffice/pds-react';
import { useState } from 'react';
const [on, setOn] = useState(false);
<Toggle checked={on} onChange={setOn} label="다크 모드" />