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

사용자가 선택하거나 입력하는 값을 표시하는 컴포넌트입니다.

| Platform | Status |
| --- | --- |
| Figma | Done |
| [React](/react/components/chip) | Done |
| Lynx | Not Ready |
| iOS | Done |
| Android | Done |

## Anatomy

![Chip의 Anatomy 이미지. Container, Label, Prefix Item, Suffix Item으로 구성됩니다.](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/49348701-1fc3-4874-acd2-0902eb5f4665)

Chip은 Container와 Label로 구성되며, Prefix Item과 Suffix Item을 가질 수 있습니다.

## Properties

### Variant

![Chip의 Variant Property - Solid, Outline Strong, Outline Weak](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/eaecb675-bd61-4005-8921-28a5b446813d)

Chip은 Solid, Outline Strong, Outline Weak 세 가지 스타일의 Variant를 가집니다. 각각 선택된 상태를 표시할 수 있습니다.

### Size

![Chip의 Size Property - Large, Medium, Small](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/0cd4b73b-888b-4e8d-b2f9-69e0738863ce)

Chip은 Large, Medium, Small 세 가지 Size를 가집니다.

### State

![Chip의 State - Enabled, Pressed, Disabled](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/1b169159-2ed6-497d-9f1e-c0e9a199043a)

Chip은 선택 여부에 따라 각각 Enabled, Pressed, Disabled 상태를 가집니다.

### Prefix Property

![Chip의 Prefix Property - Icon, Avatar, Image](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/9682f75d-144b-45ec-b60c-28512767f8ff)

Prefix Slot은 Label의 왼쪽에 위치합니다. Prefix에는 Icon, Avatar, Image 세 가지의 타입을 프리셋 형태로 제공합니다.

**Prefix Slot에 들어오는 요소에 따라 좌측 여백이 달라지므로 Custom Slot은 사용을 권장하지 않습니다.**

### Suffix Property

![Chip의 Suffix Property - Icon, Custom](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/9c8d254f-a7b6-49e5-94b9-5e58f3066f32)

Suffix Slot은 Label의 오른쪽에 위치합니다. Suffix에는 Icon 타입을 프리셋 형태로 제공합니다.

포함된 타입 이외에 다른 요소를 사용하고 싶은 경우 Custom Child Swap을 통해서 변경해주세요.

## Guidelines

### Chip의 활용

![Chip, Chip Group](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/9c2955a8-5348-4e86-9d8a-b33b57bd1eb9)

![Filter Bar](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/dc11fcf9-bf99-467a-bfe5-f7e73ffe6a6c)

![Tabs - Chip Variant](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/67a13a97-0038-4db4-9265-86d0d1e91886)

Chip은 사용자가 선택하거나 입력하는 값을 표시할 때 단독으로 사용할 수 있으며 여러 개의 Chip을 함께 사용하는 경우 Chip Group 템플릿을 사용합니다.

Chip Group은 제안하는 항목 (Suggestion), 단일 또는 다중 선택 (Selection)의 용도로 사용할 수 있습니다.

콘텐츠 목록에서 조건의 적용 및 해제를 제어하는 Filter 역할로 사용할 때는 Filter Bar 템플릿을 사용합니다.

Chip을 Tab 역할로 사용하는 경우 [Tabs](/components/tabs) 컴포넌트의 Chip Variant를 사용합니다.

### Chip Group Layout

![Chip Group Layout - Scrollable과 Overflow 레이아웃](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/27fa02e9-e0dc-4e34-8be3-4fdff84b98fc)

Chip Group은 한 줄에 표시하는 Scrollable Layout과 모든 Chip을 표시하는 Overflow Layout 두 가지 방법으로 표시할 수 있습니다.

### Filter Bar

![Filter Bar 사용 예시 - 필터 비활성과 필터 활성화](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/c47bbf7c-fe23-410b-90e6-00afd69a7055)

콘텐츠 목록에서 조건의 적용 및 해제를 제어하는 Filter 역할로 Chip을 사용할 때는 Filter Bar 템플릿을 사용합니다.

Filter Bar는 활성화된 필터가 있는 경우 필터 선택을 해제할 수 있는 Clear 버튼이 나타나는 동작을 포함합니다.

### Chip을 Selection으로 사용하기

![Chip을 Selection으로 사용하는 예시 - 다중 선택과 단일 선택](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/9eac5a1a-7a50-4d29-8c3f-afd619d9d110)

필터 항목, 입력폼 같이 단일 또는 다중 선택 동작에 Chip Group을 사용할 수 있습니다. 화면에 Selected 된 값이 여러 개 표시될 수 있으므로 주목도가 낮은 Outline Weak 스타일 사용을 권장합니다.

### Chip을 Suggestion으로 사용하기

![Chip을 Suggestion으로 사용하는 예시 - 채팅 추천 메시지, 추천 검색어](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/369710ac-85e9-4262-93fc-71dc193a23f0)

사용자에게 제안하는 항목에 Chip을 사용할 수 있습니다. 화면 내 다른 요소와의 조합에 따라 스타일을 선택해 사용해주세요.

### Chip을 Input으로 사용하기

![Chip을 Input으로 사용하는 예시 - Suffix에 Remove 버튼 포함](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/065738df-c244-478d-90bc-4ce5db57c45d)

사용자가 입력한 내용을 Chip에 표시할 수 있습니다. 이 경우 Suffix Slot에 Chip을 제거할 수 있는 Remove 버튼을 사용해주세요.

## Specification

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