Chip
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>
Props
Prop | Type |
---|---|
label |
|
onAddSuggestion |
|
onClose |
|
onDropdown |
|
value |
|
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.
import {useState} from 'react'; import {Box, Chip} from '@sail/ui/deprecated'; const WithDropdown = () => { const [open, setOpen] = useState(false); return ( <> <Chip label="Status" value="Succeeded" onDropdown={() => setOpen(!open)} onClose={() => { alert('Close function triggered'); }} /> {open && ( <Box css={{ font: 'caption', borderRadius: 'medium', background: '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" /> <Chip label="Age" value="18-24" onDropdown={() => { alert('Dropdown function triggered'); }} /> </ChipList>