PillGroup
=========

*   GitHub: [BonnierNews/dn-design-system/web/src/components/pill-group](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/pill-group)
*   Storybook: [PillGroup](https://designsystem.dn.se/?path=/docs/basic-pillgroup--docs)

The component will not include styling by itself. Make sure to include the right styles for the component. See example below: `@use '@bonniernews/dn-design-system-web/components/pill-group/pill-group.scss'`

A group of multi-select pills. Two variants:

*   `multi-select` — multiple pills can be active at once (checkbox behaviour)
*   `single-select` — only one pill can be active at a time (radio behaviour)

The component is stateless — selection state and `onClick` handlers are managed by the consumer.

| Name | Description | Default |
|:--- | :--- | :--- |
| variant\* | "multi-select", "single-select" | \- |
| items\* | PillGroupItem\[\] | PillGroupSingleSelectItem\[\] | \- |
| size | "sm", "lg" | "lg" |
| label\* | string | \- |
| classNames | Ex. "my-special-class"<br />string | \- |
| attributes | Ex. { target: "\_blank", "data-test": "lorem ipsum" }<br />Record<string, unknown> | { } |

```jsx
<PillGroup
  items={[
    {
      text: 'Sport',
      value: 'sport'
    },
    {
      text: 'Kultur',
      value: 'kultur'
    },
    {
      text: 'Ekonomi',
      value: 'ekonomi'
    },
    {
      text: 'Utrikes',
      value: 'utrikes'
    }
  ]}
  label="Filtrera efter ämne"
  variant="multi-select"
/>
```