@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