Toggle
Toggle (토글)
토글은 두 가지 가능한 상태 사이를 빠르게 전환하는 데 사용하는 컴포넌트예요. "켜기/끄기" 스위치에 흔히 사용됩니다.
출처: Toggle
본문
개요 (Overview)
토글은 두 가지 가능한 상태 사이를 빠르게 전환하는 데 사용하는 컨트롤이에요. 토글은 사용자가 "스위치를 넘긴" 직후 즉시 발생하는 이진 동작에만 사용됩니다. "켜기/끄기" 스위치에 흔히 쓰입니다.
언제 사용할까요 (When to use)
- 시스템이나 페이지 설정에 영향을 주는 단일 옵션을 켜고 끌 때
- 즉시 적용할 수 있는 설정이나 기본 설정에 이상적이에요.
- 추가 확인 없이 되돌릴 수 있는 변경이 있는 동작에 권장됩니다.
언제 사용하지 말아야 할까요 (When not to use)
- 파일 삭제처럼 동작에 즉각적인 피드백이나 확인이 필요하면 토글 사용을 피하세요.
- 두 개 이상의 옵션에는 토글을 사용하지 마세요. 대신 드롭다운, 라디오 버튼, 체크박스를 사용하세요.
- 이진적이지 않거나 즉시 적용을 제공하지 않는 설정에는 토글 사용을 피하세요. 대신 버튼과 결합한 체크박스 같은 다른 UI 컴포넌트를 사용하세요.
변형 (Variants)
| Variant | Purpose |
|---|---|
| Default toggle | 토글 상태 텍스트 외에도 라벨 텍스트를 지정해야 할 때 기본 토글을 사용하세요. 기본 토글은 폼이나 정보로 가득 찬 전체 페이지에 나타납니다. |
| Small toggle | 라벨이나 상태 텍스트를 지정할 필요가 없을 때 작은 토글을 사용하세요. 작은 토글은 크기가 더 콤팩트하며 다른 컴포넌트와 인라인으로 사용됩니다. |
기능 플래그 (Feature flags)
토글에 기능 플래그가 추가되어 라벨 간격을 조정하고, 기능이 아닌 시각적 모양만 바꿉니다. 코드별 기능 플래그 정보는 Code 탭을 참고하세요. 현재 토글은 더 이상 사용되지 않지는 않지만, 앞으로는 제품에 기능 플래그 토글을 사용하도록 권장해요. 향후 다음 메이저 릴리스(v12)가 출시되면 이 기능 플래그가 컴포넌트의 기본 버전이 됩니다.
토글에 가해진 기능 플래그 변경 사항은 다음과 같아요.
- 토글의 라벨과 컨테이너 사이의 간격이 다른 컴포넌트의 라벨 간격과의 일관성을 개선하기 위해 16px 대신 8px가 됐어요.
- 이 변경은 기본 토글과 작은 토글 모두에 적용됩니다.
포맷 (Formatting)
구조 (Anatomy)
기본 토글과 작은 토글은 모두 라벨 텍스트, 토글 버튼, 상태 텍스트로 구성돼요. 기본 토글은 두 요소 모두 선택사항인 작은 토글과 달리 컴포넌트 라벨과 상태 텍스트를 표시해야 합니다. 작은 토글은 라벨과 상태 텍스트가 없어도 접근성을 유지하도록 "on" 상태에 체크마크 틱을 표시합니다.
1. 기본 토글
A. 라벨 텍스트 B. 토글 C. 상태 텍스트
2. 작은 토글
A. 라벨 텍스트(선택) B. 토글 C. 상태 텍스트(선택) D. 체크마크 틱(on 상태)
크기 (Sizing)
토글 컴포넌트는 기본(default)과 작은(small) 두 가지 크기로 제공됩니다.
콘텐츠 (Content)
라벨 텍스트 (Label text)
라벨 텍스트는 추가 맥락을 제공하고 상태를 명확히 하기 위해 토글에 함께 있어야 해요. 다만 라벨 텍스트는 작은 토글에서 선택사항입니다.
상태 텍스트 (State text)
토글의 이진 동작을 동작이 명확해지도록 설명하는 데 상태 텍스트를 사용하세요. 상태 텍스트는 세 단어 이하여야 하며 토글의 옆에 표시됩니다. 상태 텍스트는 작은 토글에서 선택사항이에요.
언어 (Language)
영향을 받는 객체의 동작과 상태를 설명할 때는 동사보다 형용사를 사용하세요.
추가 가이드 (Further guidance)
더 자세한 콘텐츠 가이드는 Carbon의 콘텐츠 가이드라인을 참고하세요.
동작 (Behaviors)
상태 (States)
기본 토글과 작은 토글에는 on과 off라는 두 가지 주요 상태가 있어요. 다른 인터랙티브 상태로는 포커스, 비활성, 읽기 전용, 스켈레톤이 있습니다. 토글 상태에 대한 자세한 내용은 Style 탭을 참고하세요.
| State | When to use |
|---|---|
| On | 사용자가 클릭하거나 화살표 키를 사용해 컴포넌트를 켤 때예요. |
| Off | 사용자가 클릭하거나 화살표 키를 사용해 컴포넌트를 끌 때예요. |
| Focus | 사용자가 토글을 탭하거나 클릭하면 포커스되어 컴포넌트로 성공적으로 이동했음을 나타내요. |
| Disabled | 권한, 의존성, 선행 조건 때문에 사용자가 토글과 상호작용할 수 없을 때예요. 비활성 상태는 컴포넌트의 인터랙티브 기능을 완전히 제거합니다. 스타일은 WCAG 대비 준수 대상이 아닙니다. |
| Read-only | 사용자가 컴포넌트를 검토할 수 있지만 수정할 수 없을 때예요. 이 상태는 비활성 상태처럼 모든 인터랙티브 기능을 제거하지만, 여전히 포커스 가능하고 스크린 리더가 접근할 수 있으며 가독성을 위한 시각적 대비를 통과합니다. |
| Skeleton | 초기 페이지 로드에 사용해 토글이 아직 완전히 로드되지 않았음을 나타내요. |
인터랙션 (Interactions)
마우스 (Mouse)
토글 컴포넌트는 클릭 시 트리거되어 "on"과 "off" 상태 사이를 전환해요. 또한 선택되면 보이는 포커스 상태를 가져 접근성을 보장합니다.
키보드 (Keyboard)
키보드 탐색을 위해 사용자는 Tab 키로 토글에 포커스를 맞출 수 있어 키보드 사용자에게 시각적 피드백을 제공해요. Enter 또는 Space를 누르면 토글의 상태가 "on"과 "off" 사이로 변경됩니다.
클릭 영역 (Clickable areas)
토글 컴포넌트에는 토글 스위치 자체와 그와 연결된 라벨이라는 두 개의 클릭 영역이 있어요. 사용자는 어느 영역이든 클릭해 토글의 상태를 바꿀 수 있습니다.
기본 토글 (Default toggle)
기본 토글은 작은 토글보다 크기가 더 커요. 폼에 흔히 사용되며 공간이 제한되지 않는 정보로 가득 찬 전체 페이지에 나타날 수 있습니다. 기본 토글은 보이는 라벨과 상태 텍스트를 표시해야 해요.
기본 토글에는 사용 가능한 기능 플래그가 있습니다.
작은 토글 (Small toggle)
작은 토글은 콘덴스드 공간에서 자주 사용되며 다른 컴포넌트나 콘텐츠와 인라인으로 나타나요. 작은 토글에서는 라벨과 상태 텍스트가 선택사항입니다.
작은 토글에는 사용 가능한 기능 플래그가 있어요.
기본 토글과 달리 작은 토글은 크기가 더 콤팩트하며, 보이는 라벨이나 상태 텍스트 없이도 접근성을 유지하도록 on 상태에 체크마크 틱을 표시합니다. 예를 들어 데이터 테이블 행 안에서요.
관련 (Related)
- 버튼 (Button)
- 체크박스 (Checkbox)
- 데이터 테이블 (Data table)
- 드롭다운 (Dropdown)
- 라디오 버튼 (Radio button)
더 알아보기 (Learn more)
토글은 두 가지 상태 사이를 즉시 전환하는 이진 동작에 가장 적합한 컴포넌트예요. 즉시 적용되고 되돌릴 수 있는 설정에 사용하되, 확인이 필요한 동작이나 두 개 이상의 옵션에는 사용하지 마세요. 라벨·상태 텍스트가 필요한 폼에는 기본 토글을, 공간이 좁고 라벨 없이 쓸 때는 작은 토글을 고르는 게 좋습니다.