# Chip component for Stripe Apps Use chips to display and allow users to manipulate values. # v8 > This is a v8 for when app-sdk-version is 8. View the full page at https://docs.stripe.com/stripe-apps/components/chip?app-sdk-version=8. To add the `Chip` component to your app: ```js import {Chip, ChipList} from '@stripe/ui-extension-sdk/ui'; ``` This is a preview of several `Chip` components in a `ChipList` component with different property configurations: ### ChipList props | Property | Type | | ----------- | ---------------------------------------------------------------- | | `children` | (Required) `React.ReactNode` One or more `Chip` components. | | `direction` | (Optional) `("row" | "row-reverse") | undefined` | ### Chip props | Property | Type | | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `label` | (Optional) `string | undefined` A string that uniquely identifies the `Chip` amongst other `Chips` that may be presented alongside it. If this property is present without a `value`, the `Chip` will be rendered in the “suggested” style. | | `onAddSuggestion` | (Optional) `(() => void) | undefined` The function to be called when the user clicks a “suggested” `Chip` in order to activate it. | | `onClose` | (Optional) `(() => void) | undefined` The function to be called when the user clicks the icon to remove a `Chip`. | | `onDropdown` | (Optional) `(() => void) | undefined` The function to be called when the user clicks the right side of an active `Chip` in order to edit the selected value. | | `value` | (Optional) `(string | string[]) | undefined` The currently selected value of a `Chip`. | ## Suggested chip To suggest to the user with a `plus` icon that they add something represented by a chip, pass a callback function to the `onAddSuggestion` property. ## Chip with dropdown If you want to allow the user to edit the value of a chip after they’ve made their initial selection, provide an `onDropdown` callback function to open a selection interface needed for making edits. ## Representing multiple values When you populate the `Chip` component’s `value` property with an array of values, they’re listed within the chip. ## Presenting chips in a list In many cases, chips aren’t presented on their own—they’re alongside other chips. The `ChipList` component handles the appropriate spacing and wrapping of chips in a list, and also provides for convenient keyboard navigation of chips using the right and left arrow keys. ## Non-closeable chip When a `Chip` represents a required value, it can be useful to present a chip without an `add` or `cancel` icon. Exclude the `onAddSuggestion` and `onClose` callbacks to present users with a non-closeable chip. # v9 > This is a v9 for when app-sdk-version is 9. View the full page at https://docs.stripe.com/stripe-apps/components/chip?app-sdk-version=9. To add the `Chip` component to your app: ```js import {Chip, ChipList} from '@stripe/ui-extension-sdk/ui'; ``` This is a preview of several `Chip` components in a `ChipList` component with different property configurations: ### ChipList props | Property | Type | | ----------- | ---------------------------------------------------------------- | | `children` | (Required) `React.ReactNode` One or more `Chip` components. | | `direction` | (Optional) `("row" | "row-reverse") | undefined` | ### Chip props | Property | Type | | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `label` | (Optional) `string | undefined` A string that uniquely identifies the `Chip` amongst other `Chips` that may be presented alongside it. If this property is present without a `value`, the `Chip` will be rendered in the “suggested” style. | | `onAddSuggestion` | (Optional) `(() => void) | undefined` The function to be called when the user clicks a “suggested” `Chip` in order to activate it. | | `onClose` | (Optional) `(() => void) | undefined` The function to be called when the user clicks the icon to remove a `Chip`. | | `onDropdown` | (Optional) `(() => void) | undefined` The function to be called when the user clicks the right side of an active `Chip` in order to edit the selected value. | | `value` | (Optional) `(string | string[]) | undefined` The currently selected value of a `Chip`. | ## Suggested chip To suggest to the user with a `plus` icon that they add something represented by a chip, pass a callback function to the `onAddSuggestion` property. ## Chip with dropdown If you want to allow the user to edit the value of a chip after they’ve made their initial selection, provide an `onDropdown` callback function to open a selection interface needed for making edits. ## Representing multiple values When you populate the `Chip` component’s `value` property with an array of values, they’re listed within the chip. ## Presenting chips in a list In many cases, chips aren’t presented on their own—they’re alongside other chips. The `ChipList` component handles the appropriate spacing and wrapping of chips in a list, and also provides for convenient keyboard navigation of chips using the right and left arrow keys. ## Non-closeable chip When a `Chip` represents a required value, it can be useful to present a chip without an `add` or `cancel` icon. Exclude the `onAddSuggestion` and `onClose` callbacks to present users with a non-closeable chip. ## See also - [Design patterns to follow](https://docs.stripe.com/stripe-apps/patterns.md) - [Style your app](https://docs.stripe.com/stripe-apps/style.md) - [UI testing](https://docs.stripe.com/stripe-apps/ui-testing.md)