# Switch
URL: /components/switch
Source: https://github.com/daangn/seed-design/blob/dev/docs/content/components/switch.mdx

특정 설정 및 상태를 즉시 켜거나 끌 수 있도록 하는 컴포넌트입니다.

| Platform | Status |
| --- | --- |
| Figma | Done |
| [React](/react/components/switch) | Done |
| [Lynx](/lynx/components/switch) | Done |
| iOS | Done |
| Android | Done |

## Anatomy

![Switch의 Anatomy 이미지. Switch Mark와 Label로 구성됩니다.](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/7bfd9020-145d-4ee0-bce7-b2b4e1a6d56e)

Switch는 Switch Mark와 Label로 구성됩니다. Switch Mark는 개별 컴포넌트로 제공되어서 자유롭게 조합해서 사용할 수 있습니다.

Switch Mark는 Thumb과 Track으로 이뤄져 있습니다.

## Properties

### Size

![Switch의 Size Property - 16, 24, 32](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/75a939af-ca67-4d8b-b50d-61705209e523)

Switch는 높이값에 따라 16, 24, 32로 제공됩니다.

### Tone

![Switch의 Tone Property - Neutral](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/177f20e7-884a-44f7-87d6-00c948538376)

Switch는 Neutral Tone으로 사용합니다.

### State

![Switch의 State - Selected, Unselected, Enabled, Disabled](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/bda0af4d-94c1-438c-b599-8f4f3ca0c89b)

![Switch의 State - Selected, Unselected, Enabled, Disabled (다크 모드)](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/b4c58ef7-6bed-4fe4-a01c-931df6bfbd9f)

Switch는 선택(Selected), 미선택(Unselected) 상태를 가지며, 이 각각의 상태는 사용자의 상호작용에 따라 활성화(Enabled), 비활성화(Disabled)의 상태로 조합되어 표현됩니다.

### Layout

![Switch의 Layout - 크기별 권장 텍스트 레이블 스타일](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/84e59579-1ccf-4079-b886-7928e0293a9d)

각 Switch 크기에 시각적으로 가장 잘 어울리는 텍스트 레이블 스타일을 권장 조합으로 제공합니다. 이를 통해 일관성 있고 균형 잡힌 UI를 빠르게 완성할 수 있습니다.

## Guidelines

### Switch Touch Target

![Switch의 Touch Target](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/218870c5-a64a-4285-aaf6-fb63316f9eff)

Switch는 Switch Mark, Label을 포함한 영역이 Target으로 동작합니다.

Switch의 16 사이즈는 touch target 최소 보장 영역이 되어야 하기에 24 높이값을 가지고 있습니다.

![List Item의 Touch Target](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/5930b5df-5ff6-4dec-a047-f9a6ef9b523d)

[List](/components/list)처럼 Switch를 조합해서 사용하는 경우 전체 Row가 Target 영역이 되어야 합니다.

![Switch Mark와 Switch의 Touch Target 비교](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/881f07f5-c2c3-41b1-a623-bbd83a638992)

**Switch Mark는 다른 요소와 조합하여 사용하도록 설계되었기 때문에 요소 크기 이상의 터치 영역을 별도로 가지고 있지 않습니다.**

### 상태를 즉시 활성화할 때 사용하기

<DontImage alt="'위의 내용을 모두 확인했어요'라는 레이블로 Switch를 사용한 예시" body="즉각적인 결과가 없는 상황에서는 Switch를 사용하지 마세요." />

<DoImage alt="'위의 내용을 모두 확인했어요'라는 레이블로 Checkbox를 사용한 예시" body="즉각적인 결과가 나타나지 않는 경우 Checkbox를 사용합니다." />

Switch는 토글 시 즉각적인 결과가 나타나기에 마지막 버튼을 탭할 때까지 결과가 나타나지 않는 경우 [Checkbox](/components/checkbox)를 사용합니다.

### 독립적인 기능에서만 사용하기

<DontImage body="Switch 대신 부모-자식 관계가 있는 컴포넌트를 활용해주세요." alt="전체 알림 켜기/끄기 Switch와 하위 알림 설정 Switch가 나열된 예시" />

Switch는 독립적으로 작동하는 요소입니다. '모두 선택/전체 선택'과 같은 액션이 필요한 경우 부모-자식 관계가 있는 컴포넌트를 사용하는 것이 좋습니다.

### Disabled 상태는 명확하게 표기하기

![List Item 전체와 Switch Mark가 비활성화 상태를 나타내고 있는 예시](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/16ec1a87-3312-41e9-acbb-ae4a01006b63)

<DontImage alt="List Item에서 Switch Mark만 비활성화 상태를 나타내고 있는 예시" body="Disabled 상태일 시 텍스트 레이블 또한 disabled 상태를 표현하는 것을 권장해요." />

Switch 비활성화 시, 사용자가 항목 전체의 상태를 오인하지 않도록 텍스트 레이블도 비활성화 색상으로 표기하는 것을 권장합니다.

## Switch vs. Checkbox

### Checkbox, Switch 비교

![Checkbox와 Switch의 사용 예시](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/5ab03137-86fe-44ed-880b-9dd443d4fcff)

[Checkbox](/components/checkbox)와 Switch는 사용자의 선택 여부를 표시하는 컴포넌트입니다.

|              | Checkbox                     | Switch                  |
| ------------ | ---------------------------- | ----------------------- |
| **선택값 적용**   | 저장하기 등의 액션을 수행해야 값이 저장됨 (권장) | 별다른 액션이 없어도 즉시 적용됨 (권장) |
| **항목 구성 방식** | 하나의 카테고리에 여러 항목으로 나열할 수 있음   | 개별 항목으로 구성하는 것을 권장      |
| **하위 항목 구성** | 부모가 모든 하위 항목을 선택/해제할 수 있음    | 부모와 하위 항목간 관계가 없음       |

## Specification

### Switch

Component spec (JSON): /rootage/components/switch.json

### Switchmark

Component spec (JSON): /rootage/components/switchmark.json