AssistChip 컴포저블은 사용자를 특정 방향으로 유도하는 지원 칩을 간단하게 만드는 방법을 제공합니다. 한 가지 구별되는 특징은 그림 1과 같이 칩 왼쪽에 아이콘을 표시할 수 있는 leadingIcon 매개변수입니다. 다음 예는 이를 구현하는 방법을 보여줍니다.
그림 1. 지원 칩
필터 칩 만들기
FilterChip 컴포저블을 사용하려면 칩이 선택되었는지 여부를 추적해야 합니다. 다음 예는 사용자가 칩을 선택한 경우에만 체크된 아이콘을 표시하는 방법을 보여줍니다.
결과
그림 2. 선택되지 않은 필터 칩그림 3. 선택한 필터 칩
입력 칩 만들기
InputChip 컴포저블을 사용하여 사용자 상호작용의 결과로 생성되는 칩을 만들 수 있습니다. 예를 들어 이메일 클라이언트에서 사용자가 이메일을 작성할 때 입력 칩은 사용자가 '받는사람:' 입력란에 입력한 주소를 가진 사람을 나타낼 수 있습니다.
다음 구현은 선택된 상태에 있는 입력 칩을 보여줍니다. 사용자가 칩을 누르면 칩이 닫힙니다.
결과
그림 4. 입력 칩
추천 칩 만들기
SuggestionChip 컴포저블은 API 정의와 일반적인 사용 사례 모두에서 이 페이지에 나열된 컴포저블 중 가장 기본적인 컴포저블입니다. 추천 칩은 동적으로 생성된 힌트를 표시합니다. 예를 들어 AI 채팅 앱에서는 추천 칩을 사용하여 최근 메시지에 대한 가능한 대답을 표시할 수 있습니다.
다음 SuggestionChip 구현을 고려해 보세요.
결과
그림 5. 지원 칩
상단 칩 만들기
이 문서의 모든 예에서는 평면 모양을 사용하는 기본 컴포저블을 사용합니다. 고급스러운 모양의 칩을 만들려면 다음 세 가지 컴포저블 중 하나를 사용하세요.
이 페이지에 나와 있는 콘텐츠와 코드 샘플에는 콘텐츠 라이선스에서 설명하는 라이선스가 적용됩니다. 자바 및 OpenJDK는 Oracle 및 Oracle 계열사의 상표 또는 등록 상표입니다.
최종 업데이트: 2025-02-06(UTC)
[[["이해하기 쉬움","easyToUnderstand","thumb-up"],["문제가 해결됨","solvedMyProblem","thumb-up"],["기타","otherUp","thumb-up"]],[["필요한 정보가 없음","missingTheInformationINeed","thumb-down"],["너무 복잡함/단계 수가 너무 많음","tooComplicatedTooManySteps","thumb-down"],["오래됨","outOfDate","thumb-down"],["번역 문제","translationIssue","thumb-down"],["샘플/코드 문제","samplesCodeIssue","thumb-down"],["기타","otherDown","thumb-down"]],["최종 업데이트: 2025-02-06(UTC)"],[],[],null,["\u003cbr /\u003e\n\nThe `Chip` component is a compact, interactive UI element. It represents complex\nentities like a contact or tag, often with an icon and label. It can be\ncheckable, dismissible, or clickable.\n\nThe five types of chips and where you might use them are as follows:\n\n- [Assist](#assist): Guides the user during a task. Often appears as a temporary UI element in response to user input.\n- [Filter](#filter): Lets users refine content from a set of options. They can be selected or deselected, and may include a checkmark icon when selected.\n- [Input](#input): Represents user-provided information, such as selections in a menu. They can contain an icon and text, and provide an 'X' for removal.\n- [Suggestion](#suggestion): Provides recommendations to the user based on their recent activity or input. Typically appear beneath an input field to prompt user actions.\n- [Elevated](#elevated): Has an elevated appearance instead of looking flat.\n\nVersion compatibility\n\nThis implementation requires that your project minSDK be set to API level 21 or\nhigher.\n\nDependencies\n\nCreate an assist chip\n\nThe [`AssistChip`](/reference/kotlin/androidx/compose/material3/package-summary#AssistChip(kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,kotlin.Function0,androidx.compose.ui.graphics.Shape,androidx.compose.material3.ChipColors,androidx.compose.material3.ChipElevation,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.interaction.MutableInteractionSource)) composable provides a straightforward way to create an\nassist chip that nudges the user in a particular direction. One distinguishing\nfeature is its `leadingIcon` parameter that lets you display an icon on the left\nside of the chip, as shown in figure 1. The following example demonstrates how\nyou can implement it:\n**Figure 1.** Assist chip.\n\nCreate a filter chip\n\nThe [`FilterChip`](/reference/kotlin/androidx/compose/material3/package-summary#FilterChip(kotlin.Boolean,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,kotlin.Function0,androidx.compose.ui.graphics.Shape,androidx.compose.material3.SelectableChipColors,androidx.compose.material3.SelectableChipElevation,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.interaction.MutableInteractionSource)) composable requires you to track whether or not the chip\nis selected. The following example demonstrates how you can show a leading\nchecked icon only when the user has selected the chip:\n\nResults **Figure 2.** Unselected filter chip. **Figure 3.** Selected filter chip.\n\nCreate an input chip\n\nYou can use the [`InputChip`](/reference/kotlin/androidx/compose/material3/package-summary#InputChip(kotlin.Boolean,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,kotlin.Function0,kotlin.Function0,androidx.compose.ui.graphics.Shape,androidx.compose.material3.SelectableChipColors,androidx.compose.material3.SelectableChipElevation,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.interaction.MutableInteractionSource)) composable to create chips that result from\nuser interaction. For example, in an email client, when the user is writing an\nemail, an input chip might represent a person whose address the user has entered\ninto the \"to:\" field.\n\nThe following implementation demonstrates an input chip that is in a selected\nstate. The user dismisses the chip when they press it.\n| **Note:** Consider how you might use a chip like this in the preceding email use case, with a name passed in for the `text` parameter, and a function that performs the necessary network calls for `onDismiss`.\n\nResults **Figure 4.** Input chip.\n\nCreate a suggestion chip\n\nThe [`SuggestionChip`](/reference/kotlin/androidx/compose/material3/package-summary#SuggestionChip(kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,androidx.compose.ui.graphics.Shape,androidx.compose.material3.ChipColors,androidx.compose.material3.ChipElevation,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.interaction.MutableInteractionSource)) composable is the most basic of the composables listed\non this page, both in its API definition and its common use cases. Suggestion\nchips present dynamically generated hints. For example, in an AI chat app, you\nmight use suggestion chips to present possible responses to the most recent\nmessage.\n\nConsider this implementation of `SuggestionChip`:\n\nResults **Figure 5.** Assist chip. **Note:** Although the suggestion chip component is intended for informational purposes, it does still take an `onClick` lambda that you can use to create interactivity.\n\nCreate an elevated chip\n\nAll the examples in this document use the base composables that take a flat\nappearance. If you want a chip that has an elevated appearance, use one of the\nthree following composables:\n\n- [`ElevatedAssistChip`](/reference/kotlin/androidx/compose/material3/package-summary#ElevatedAssistChip(kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,kotlin.Function0,androidx.compose.ui.graphics.Shape,androidx.compose.material3.ChipColors,androidx.compose.material3.ChipElevation,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.interaction.MutableInteractionSource))\n- [`ElevatedFilterChip`](/reference/kotlin/androidx/compose/material3/package-summary#ElevatedFilterChip(kotlin.Boolean,kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,kotlin.Function0,androidx.compose.ui.graphics.Shape,androidx.compose.material3.SelectableChipColors,androidx.compose.material3.SelectableChipElevation,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.interaction.MutableInteractionSource))\n- [`ElevatedSuggestionChip`](/reference/kotlin/androidx/compose/material3/package-summary#ElevatedSuggestionChip(kotlin.Function0,kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Function0,androidx.compose.ui.graphics.Shape,androidx.compose.material3.ChipColors,androidx.compose.material3.ChipElevation,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.interaction.MutableInteractionSource))\n\nKey points\n\nFour composables correspond to the four types of chips, and they share the\nfollowing parameters:\n\n- **`label`**: The string that appears on the chip.\n- **`icon`** : The icon displayed at the start of the chip. Some composables have a separate `leadingIcon` and `trailingIcon` parameter.\n- **`onClick`**: The lambda that the chip calls when the user clicks it.\n\nCollections that contain this guide\n\nThis guide is part of these curated Quick Guide collections that cover\nbroader Android development goals: \n\nDisplay interactive components \nLearn how composable functions can enable you to easily create beautiful UI components based on the Material Design design system. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/display-interactive-components) \n\nHave questions or feedback \nGo to our frequently asked questions page and learn about quick guides or reach out and let us know your thoughts. \n[Go to FAQ](/quick-guides/faq) [Leave feedback](https://issuetracker.google.com/issues/new?component=1573691&template=1993320)"]]
