# Composant de puce pour les applications Stripe Utilisez des puces pour afficher des valeurs aux utilisateurs et leur permettre de les modifier. # 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. Pour ajouter le composant `Chip` à votre application : ```js import {Chip, ChipList} from '@stripe/ui-extension-sdk/ui'; ``` Voici un aperçu de plusieurs composants `Chip` au sein d’un composant `ChipList` qui présente différentes configurations de propriété : ### Propriétés de la ChipList | Propriété | Type | | ----------- | ----------------------------------------------------------------------- | | `children` | (Obligatoire) `React.ReactNode` Un ou plusieurs composants `Chip`. | | `direction` | (Facultatif) `("row" | "row-reverse") | undefined` | ### Propriétés de la puce | Propriété | Type | | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `label` | (Facultatif) `string | undefined` Chaîne de caractères qui distingue la `Chip` des autres `Chips` qui peuvent être présentées à côté. Si cette propriété est présente sans `value`, la `Chip` sera présentée dans le style « suggéré ». | | `onAddSuggestion` | (Facultatif) `(() => void) | undefined` La fonctionnalité à appeler lorsque l’utilisateur clique sur une `Chip` « suggérée » afin de l’activer. | | `onClose` | (Facultatif) `(() => void) | undefined` La fonctionnalité à appeler lorsque l’utilisateur clique sur l’icône pour supprimer une `Chip`. | | `onDropdown` | (Facultatif) `(() => void) | undefined` La fonctionnalité à appeler lorsque l’utilisateur clique sur le côté droit d’une `Chip` active afin de modifier la valeur sélectionnée. | | `value` | (Facultatif) `(string | string[]) | undefined` La valeur actuellement sélectionnée d’une `Chip`. | ## Puce suggérée Pour permettre aux utilisateurs d’ajouter un élément représenté par une puce à l’aide d’une icône `plus` , transmettez la fonction de rappel à la propriété `onAddSuggestion`. ## Puce avec liste déroulante Si vous souhaitez autoriser l’utilisateur à modifier la valeur d’une puce après avoir réalisé sa sélection initiale, fournissez une fonction de rappel `onDropdown` de sorte à ouvrir l’interface de sélection dont il a besoin pour apporter des modifications. ## Représentation de plusieurs valeurs Lorsque vous renseignez la propriété `value` du composant `Chip` dans un tableau de valeurs, les valeurs sont répertoriées dans la puce. ## Affichage de puces sous forme de liste Dans de nombreux cas, une puce s’accompagne d’autres puces. Le composant `ChipList` gère l’espace qui sépare les puces et la mise en forme de ces dernières sous forme de liste. En outre, il permet de naviguer aisément entre les puces à l’aide des touches fléchées gauche et droite du clavier. ## Puce non fermable Lorsqu’un composant `Chip` représente une valeur obligatoire, il peut être judicieux de présenter une puce sans icône `add` ou `cancel`. Pour présenter les utilisateurs avec une puce non fermable, excluez les rappels `onAddSuggestion` et `onClose`. # 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. Pour ajouter le composant `Chip` à votre application : ```js import {Chip, ChipList} from '@stripe/ui-extension-sdk/ui'; ``` Voici un aperçu de plusieurs composants `Chip` au sein d’un composant `ChipList` qui présente différentes configurations de propriété : ### Propriétés de la ChipList | Propriété | Type | | ----------- | ----------------------------------------------------------------------- | | `children` | (Obligatoire) `React.ReactNode` Un ou plusieurs composants `Chip`. | | `direction` | (Facultatif) `("row" | "row-reverse") | undefined` | ### Propriétés de la puce | Propriété | Type | | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `label` | (Facultatif) `string | undefined` Chaîne de caractères qui distingue la `Chip` des autres `Chips` qui peuvent être présentées à côté. Si cette propriété est présente sans `value`, la `Chip` sera présentée dans le style « suggéré ». | | `onAddSuggestion` | (Facultatif) `(() => void) | undefined` La fonctionnalité à appeler lorsque l’utilisateur clique sur une `Chip` « suggérée » afin de l’activer. | | `onClose` | (Facultatif) `(() => void) | undefined` La fonctionnalité à appeler lorsque l’utilisateur clique sur l’icône pour supprimer une `Chip`. | | `onDropdown` | (Facultatif) `(() => void) | undefined` La fonctionnalité à appeler lorsque l’utilisateur clique sur le côté droit d’une `Chip` active afin de modifier la valeur sélectionnée. | | `value` | (Facultatif) `(string | string[]) | undefined` La valeur actuellement sélectionnée d’une `Chip`. | ## Puce suggérée Pour permettre aux utilisateurs d’ajouter un élément représenté par une puce à l’aide d’une icône `plus` , transmettez la fonction de rappel à la propriété `onAddSuggestion`. ## Puce avec liste déroulante Si vous souhaitez autoriser l’utilisateur à modifier la valeur d’une puce après avoir réalisé sa sélection initiale, fournissez une fonction de rappel `onDropdown` de sorte à ouvrir l’interface de sélection dont il a besoin pour apporter des modifications. ## Représentation de plusieurs valeurs Lorsque vous renseignez la propriété `value` du composant `Chip` dans un tableau de valeurs, les valeurs sont répertoriées dans la puce. ## Affichage de puces sous forme de liste Dans de nombreux cas, une puce s’accompagne d’autres puces. Le composant `ChipList` gère l’espace qui sépare les puces et la mise en forme de ces dernières sous forme de liste. En outre, il permet de naviguer aisément entre les puces à l’aide des touches fléchées gauche et droite du clavier. ## Puce non fermable Lorsqu’un composant `Chip` représente une valeur obligatoire, il peut être judicieux de présenter une puce sans icône `add` ou `cancel`. Pour présenter les utilisateurs avec une puce non fermable, excluez les rappels `onAddSuggestion` et `onClose`. ## See also - [Modèles de conception](https://docs.stripe.com/stripe-apps/patterns.md) - [Styliser votre application](https://docs.stripe.com/stripe-apps/style.md) - [Tests d’interface utilisateur](https://docs.stripe.com/stripe-apps/ui-testing.md)