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

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

## Anatomy

![Chip의 Anatomy 이미지. Container, Label, Prefix Item, Suffix Item으로 구성됩니다.](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/47936c9e-e7b9-4ce5-8a49-f7a90d2dee6f)

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/e98a8f5a-fb46-4e5b-a8c7-ee57f9aec32b)

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/db318734-4e9f-4e3e-92d2-f3ad4e531397)

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

### State

![Chip의 State - Enabled, Pressed, Disabled](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/b0019cf2-9ab9-4d53-a114-127eaa772a8e)

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

### Prefix Property

![Chip의 Prefix Property - Icon, Avatar, Image](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/4dd012ce-4bee-401b-8435-6e37ac2f197b)

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/9dc3c2d4-74d0-45d9-9cff-2a6b2272e3d7)

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

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

## Guidelines

### Chip의 활용

![Chip, Chip Group](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/a41e996a-173f-4c4d-81c6-65be9cbef1a2)

![Filter Bar](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/701fba27-2803-4f7a-951c-d543d9333128)

![Tabs - Chip Variant](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/f59c80f0-de29-447d-a4a2-04352fd5033d)

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/6f141d6f-3245-414b-89df-a5630e0abf9c)

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

### Filter Bar

![Filter Bar 사용 예시 - 필터 비활성과 필터 활성화](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/f33f4a03-ac02-4ac4-9307-e6366aceac9b)

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

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

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

![Chip을 Selection으로 사용하는 예시 - 다중 선택과 단일 선택](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/8897bf08-95a7-44be-87d6-5a2d41c8cd18)

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

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

![Chip을 Suggestion으로 사용하는 예시 - 채팅 추천 메시지, 추천 검색어](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/5bcc161b-c384-4dac-8b8f-ff52d3b72082)

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

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

![Chip을 Input으로 사용하는 예시 - Suffix에 Remove 버튼 포함](https://figma-alpha-api.s3.us-west-2.amazonaws.com/images/f96d6624-dc8a-4c4e-90b2-b2601185a369)

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

## Specification

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