Chip
Use chips to display and allow users to manipulate values.
To add the Chip component to your app:
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> <Chip label="Currency" value="USD" onDropdown={() => { alert('Dropdown function triggered'); }} onClose={() => { alert('Close function triggered'); }} /> <Chip label="Status" value="Succeeded" onDropdown={() => { alert('Dropdown function triggered'); }} onClose={() => { alert('Close function triggered'); }} /> <Chip label="Amount" onAddSuggestion={() => { alert('Add Amount suggestion'); }} /> <Chip label="Date" onAddSuggestion={() => { alert('Add Date suggestion'); }} /> </ChipList>
ChipList props
| Property | Type |
|---|---|
| Required
One or more Chip components. |
| Optional
|
Chip props
| Property | Type |
|---|---|
| Optional
A string that uniquely identifies the Chip amongst other Chips that may be presented alongside it. If this property is present without a |
| Optional
The function to be called when the user clicks a “suggested” Chip in order to activate it. |
| Optional
The function to be called when the user clicks the icon to remove a Chip. |
| Optional
The function to be called when the user clicks the right side of an active Chip in order to edit the selected value. |
| Optional
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 label="Date" onAddSuggestion={() => { alert('Suggestion function triggered'); }} />
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.
const [open, setOpen] = React.useState(false); return ( <> <Chip label="Status" value="Succeeded" onDropdown={() => setOpen(!open)} onClose={() => { alert('Close function triggered'); }} /> {open && ( <Box css={{ font: 'caption', borderRadius: 'medium', backgroundColor: 'container', margin: 'small', padding: 'medium', color: 'secondary', }} > Dropdown contents </Box> )} </> );
Representing multiple values
When you populate the Chip component’s value property with an array of values, they’re listed within the chip.
<Chip label="Status" value={['Refunded', 'Succeeded']} onDropdown={() => { alert('Dropdown function triggered'); }} onClose={() => { alert('Close function triggered'); }} />
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.
<ChipList> <Chip label="Currency" value="USD" onDropdown={() => { alert('Dropdown function triggered'); }} onClose={() => { alert('Close function triggered'); }} /> <Chip label="Status" value="Succeeded" onDropdown={() => { alert('Dropdown function triggered'); }} onClose={() => { alert('Close function triggered'); }} /> <Chip value="jenny.rosen@stripe.com" onClose={() => { alert('Closed jenny.rosen'); }} /> <Chip value="usr_0As2kXSWDS1lTZsH5agB" onClose={() => { alert('Closed usr_0As2kXSWDS1lTZsH5agB'); }} /> <Chip label="Amount" onAddSuggestion={() => { alert('Add Amount suggestion'); }} /> <Chip label="Date" onAddSuggestion={() => { alert('Add Date suggestion'); }} /> </ChipList>
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.
<ChipList> <Chip label="Amount" value="$10" onDropdown={() => { alert('Dropdown function triggered'); }} /> <Chip label="Age" value="18-24" onDropdown={() => { alert('Dropdown function triggered'); }} /> </ChipList>