# PillSelector

Source: https://payloadcms.com/docs/ui-components/pill-selector

The `PillSelector` component displays a wrapping list of options that can be selected, deselected, and optionally reordered.

## Import

```tsx
import { PillSelector } from '@payloadcms/ui'
```

## Interactive example

**Implementation**

```tsx
const [pills, setPills] = useState([
  { name: 'Posts', selected: true },
  { name: 'Media', selected: false },
])

<PillSelector
  pills={pills}
  onClick={({ pill }) => {
    setPills(current => current.map(item =>
      item.name === pill.name ? { ...item, selected: !item.selected } : item
    ))
  }}
/>
```

**Styling**

Customize the selector surface and selected Pill state to make the current filters visually distinct.

```css
.pill-selector {
  background: #faf9ff;
  border-radius: 10px;
}

.pill-selector__pill--selected {
  background: #6d5dfc;
  color: #ffffff;
  box-shadow: none;
}
```

- `background`: Selector or selected-Pill surface.
- `color`: Selected-Pill label.
- `box-shadow`: Selected-Pill outline and elevation.

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                                  |
| ------------- | ----------- | -------------------------------------------- |
| `name` \*     | `string`    | Stable value and default visible label.      |
| `selected` \* | `boolean`   | Whether the option is currently selected.    |
| `Label`       | `ReactNode` | Replaces the visible label.                  |
| `key`         | `string`    | 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                                |
| ----------- | --------------------------------------------------------- | ------- | ------------------------------------------ |
| `pills` \*  | `SelectablePill[]`                                        | —       | Options displayed by the selector.         |
| `onClick`   | `({ pill }) => Promise<void> \| void`                     | —       | Called when an option is activated.        |
| `draggable` | `{ onDragEnd: ({ moveFromIndex, moveToIndex }) => void }` | —       | Enables reordering and handles the result. |

_\* An asterisk denotes that a prop is required._