@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 [email protected], 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

Links

• Storybook Showcase
• GitHub source code
• Create GitHub issue
• CHANGELOG