@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 |
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 or in Storybook