PillSelector
The PillSelector component displays a wrapping list of options that can be selected, deselected, and optionally reordered.
Import
Interactive example
The component does not manage selection state. Update the pills array in onClick and pass the new array back to the component.
Pill shape
Each item in pills accepts:
Property | Type | Description |
|---|---|---|
| | Stable value and default visible label. |
| | Whether the option is currently selected. |
| | Replaces the visible label. |
| | Overrides the React key used for the option. |
* An asterisk denotes that a property is required.
Common props
These are the props most commonly used with this component. See its exported types in @payloadcms/ui for the complete list.
Prop | Type | Default | Description |
|---|---|---|---|
| | — | Options displayed by the selector. |
| | — | Called when an option is activated. |
| | — | Enables reordering and handles the result. |
* An asterisk denotes that a prop is required.
Was this page helpful?