# Chip

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

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

***

title: Chip
description: 사용자가 선택하거나 입력하는 값을 표시하는 컴포넌트입니다.
coverImageFigmaId: 39:21520
---------------------------

<PlatformStatusTable componentId="chip" />

## Anatomy

<FigmaImage id="2:59317" alt="Chip의 Anatomy 이미지. Container, Label, Prefix Item, Suffix Item으로 구성됩니다." />

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

## Properties

### Variant

<FigmaImage id="2:59333" alt="Chip의 Variant Property - Solid, Outline Strong, Outline Weak" />

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

### Size

<FigmaImage id="2:59355" alt="Chip의 Size Property - Large, Medium, Small" />

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

### State

<FigmaImage id="2:59387" alt="Chip의 State - Enabled, Pressed, Disabled" />

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

### Prefix Property

<FigmaImage id="2:59429" alt="Chip의 Prefix Property - Icon, Avatar, Image" />

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

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

### Suffix Property

<FigmaImage id="2:59454" alt="Chip의 Suffix Property - Icon, Custom" />

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

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

## Guidelines

### Chip의 활용

<FigmaImage id="2:59490" alt="Chip, Chip Group" />

<FigmaImage id="2:59506" alt="Filter Bar" />

<FigmaImage id="2:59513" alt="Tabs - Chip Variant" />

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

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

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

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

### Chip Group Layout

<FigmaImage id="2:59529" alt="Chip Group Layout - Scrollable과 Overflow 레이아웃" />

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

### Filter Bar

<FigmaImage id="2:59648" alt="Filter Bar 사용 예시 - 필터 비활성과 필터 활성화" />

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

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

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

<FigmaImage id="2:60075" alt="Chip을 Selection으로 사용하는 예시 - 다중 선택과 단일 선택" />

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

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

<FigmaImage id="2:60221" alt="Chip을 Suggestion으로 사용하는 예시 - 채팅 추천 메시지, 추천 검색어" />

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

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

<FigmaImage id="2:60391" alt="Chip을 Input으로 사용하는 예시 - Suffix에 Remove 버튼 포함" />

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

## Chip V3 변경점

<FigmaImage id="2:60441" alt="Chip V2와 V3 비교" />

* Button, Toggle Button, Radio Group, Filter 등 용례에 따라 분리되어 있던 Chip 컴포넌트를 하나로 통합했습니다.
* 여러 개의 Chip을 사용하는 케이스를 위해 Chip Group, Filter Bar 템플릿을 추가했습니다.
* Tab 용도로 사용하는 경우를 고려하여 [Tabs](/docs/components/tabs) 컴포넌트의 Variant로 Solid Chip과 Outline Chip을 추가했습니다.
* Prefix Slot에 아이콘뿐만 아니라 Avatar와 Image도 표시할 수 있도록 구조를 개선했습니다.
* 다른 Chip이나 Tabs 컴포넌트와 함께 사용하거나 화면 내 주목도에 따라 적절한 스타일을 선택할 수 있도록 Solid, Outline Strong, Outline Weak 스타일을 추가했습니다.

## Specification

<ComponentSpecBlock id="chip" />