npm package: @paprika/list-box-with-tags
Description: Allowed the consumer to display a ListBox that show the selected option in a shape of pills
Author: @paprika
Latest version: 6.0.4

<!-- start: Autogenerated - do not modify -->

# @paprika/list-box-with-tags

## Description

Allowed the consumer to display a ListBox that show the selected option in a shape of pills

## Installation

```
yarn add @paprika/list-box-with-tags
```

or with npm:

```
npm install @paprika/list-box-with-tags
```

## Props

### ListBoxWithTags

| Prop                         | Type                                                                   | required | default                           | Description                                                                                                              |
| ---------------------------- | ---------------------------------------------------------------------- | -------- | --------------------------------- | ------------------------------------------------------------------------------------------------------------------------ |
| allOptionsAreSelected        | bool                                                                   | false    | false                             | When this is true, it will display a message indicating all options are selected on the popover                          |
| allOptionsAreSelectedMessage | string                                                                 | false    | ""                                | Message to display when all options have been selected                                                                   |
| children                     | arrayOf                                                                | true     | -                                 | Child of type <ListBox.Option />, <ListBox.Divider />, etc                                                               |
| customOptionRegex            | instanceOf                                                             | false    | /^.+@.+\..+\$/                    | Regex that match the input of the user and reports to onAddCustomOption. The default is a basic email regex              |
| filter                       | func                                                                   | false    | undefined                         | filter function for the ListBoxWithTags can be pair with ListBoxWithTags.filter                                          |
| hasError                     | bool                                                                   | false    | false                             | If ListBox is in an error state                                                                                          |
| isDisabled                   | bool                                                                   | false    | false                             | Disables the ListBox if true                                                                                             |
| isReadOnly                   | bool                                                                   | false    | false                             | The ListBox will not allow value to be changed                                                                           |
| noResultsMessage             | node                                                                   | false    | null                              | String message to be display when there are not results                                                                  |
| onAddCustomOption            | func                                                                   | false    | null                              | Callback whenever the user input a new custom option like some@email.com, pass undefined to ignore this behaviour        |
| onChange                     | func                                                                   | false    | () => {}                          | Callback whenever the user change a selection on the ListBoxWithTags                                                     |
| onRemove                     | func                                                                   | false    | () => {}                          | Callback once a tag is remove from the Trigger                                                                           |
| placeholder                  | string                                                                 | false    | null                              | Default label for trigger when the ListBox has no option selected                                                        |
| renderTag                    | func                                                                   | false    | null                              | Render prop to override the default Tag style, see example for it's uses.                                                |
| selectedOptions              | arrayOf                                                                | false    | null                              | An array of id that helps the ListBoxWithTags to known what elements are selected                                        |
| size                         | [ ListBoxWithTags.types.size.MEDIUM, ListBoxWithTags.types.size.LARGE] | false    | ListBoxWithTags.types.size.MEDIUM | Size of the trigger and options (font size, height, padding, etc).                                                       |
| tagLabelKey                  | string                                                                 | false    | null                              | Provides an alternative for rendering the Tag label instead of using the default [{label:value}] coming from the og data |

<!-- end: Autogenerated - do not modify -->
<!-- content -->

#### Note

The `<ListBoxWithTags>` is composed from a `<ListBox>` component, and will propagate any additional props to the underlying `<ListBox>`, essentially extending the API to include the props for the `<ListBox>`.

Additionally, the subcomponents of `<ListBox>` like `<ListBox.Option>`, `<ListBox.Popover>`, `<ListBox.A11y>`, etc are also supported and exported as part of the `ListBoxWithTags` package.

Learn more about the `<ListBox>` component on [GitHub](https://github.com/acl-services/paprika/blob/master/packages/ListBox/README.md) or in [Storybook](https://paprika.highbond.com/?path=/story/forms-listbox-docs--page)

<!-- eoContent -->

## Links

- [Storybook Showcase](https://paprika.highbond.com/?path=/story/forms-listboxwithtags--showcase)
- [GitHub source code](https://github.com/acl-services/paprika/tree/master/packages/ListBoxWithTags/src)
- [Create GitHub issue](https://github.com/acl-services/paprika/issues/new?label=[]&title=@paprika/list-box-with-tags%20[help]:%20your%20short%20description&body=%0A%23%20Help%20wanted%0A%0A%23%23%20Please%20write%20your%20question.%0A*A%20clear%20and%20concise%20description%20of%20what%20the%20question%20is*%0A%0A%23%23%20Additional%20context%0A*Add%20any%20other%20context%20or%20screenshots%20about%20your%20question%20here.*%0A)
- [CHANGELOG](https://github.com/acl-services/paprika/tree/master/packages/ListBoxWithTags/CHANGELOG.md)