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

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

## Anatomy

![Switch의 Anatomy 이미지. Switch Mark와 Label로 구성됩니다.](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/c2eb7c1d-1b69-48ed-a185-a9dae256b9e7)

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/c863db36-586a-4a9c-b0bf-f7216390e98a)

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

### Tone

![Switch의 Tone Property - Neutral](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/f7d5cc1d-e77c-408e-9b34-6db6042d0795)

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

### State

![Switch의 State - Selected, Unselected, Enabled, Disabled](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/34374dd7-02bf-4e89-b71e-d77b0971b3e1)

![Switch의 State - Selected, Unselected, Enabled, Disabled (다크 모드)](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/7b154a1c-2313-45da-8928-9eb373664043)

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

### Layout

![Switch의 Layout - 크기별 권장 텍스트 레이블 스타일](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/40962da4-7fe9-477a-a448-62f4e622bdf0)

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

## Guidelines

### Switch Touch Target

![Switch의 Touch Target](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/17d960c2-6866-4272-a5fd-8107d8963cfb)

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/2829324b-7b6c-4bdc-b97f-31c3981500a5)

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

![Switch Mark와 Switch의 Touch Target 비교](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/981af5eb-903d-4066-a3d4-7683c4663c47)

**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/572db5b0-2c9b-418f-950f-99e7e4861ef3)

<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/6acf4ee4-3ffa-4680-b799-05b48813ea22)

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

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

## Specification

### Switch

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

### Switchmark

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