@paprika/list-box-with-tags
@paprika/list-box-with-tags
npm i @paprika/list-box-with-tags
@paprika/list-box-with-tags

@paprika/list-box-with-tags

🌶 A robust + accessible UI component library for React applications by Galvanize.

by acl-services

4.0.3 (see all)License:MITTypeScript:Built-In
npm i @paprika/list-box-with-tags
Readme

@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

PropTyperequireddefaultDescription
allOptionsAreSelectedboolfalsefalseWhen this is true, it will display a message indicating all options are selected on the popover
allOptionsAreSelectedMessagestringfalse""Message to display when all options have been selected
childrenarrayOftrue-Child of type <ListBox.Option />, <ListBox.Divider />, etc
customOptionRegexinstanceOffalse/^.+@.+..+\$/Regex that match the input of the user and reports to onAddCustomOption. The default is a basic email regex
filterfuncfalseundefinedfilter function for the ListBoxWithTags can be pair with ListBoxWithTags.filter
hasErrorboolfalsefalseIf ListBox is in an error state
isDisabledboolfalsefalseDisables the ListBox if true
isReadOnlyboolfalsefalseThe ListBox will not allow value to be changed
noResultsMessagenodefalsenullString message to be display when there are not results
onAddCustomOptionfuncfalsenullCallback whenever the user input a new custom option like some@email.com, pass undefined to ignore this behaviour
onChangefuncfalse() => {}Callback whenever the user change a selection on the ListBoxWithTags
onRemovefuncfalse() => {}Callback once a tag is remove from the Trigger
placeholderstringfalsenullDefault label for trigger when the ListBox has no option selected
renderTagfuncfalsenullRender prop to override the default Tag style, see example for it's uses.
selectedOptionsarrayOffalsenullAn array of id that helps the ListBoxWithTags to known what elements are selected
size[ ListBoxWithTags.types.size.MEDIUM, ListBoxWithTags.types.size.LARGE]falseListBoxWithTags.types.size.MEDIUMSize of the trigger and options (font size, height, padding, etc).
tagLabelKeystringfalsenullProvides 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

Downloads/wk

999

GitHub Stars

49

LAST COMMIT

9mos ago

MAINTAINERS

3

CONTRIBUTORS

58

OPEN ISSUES

45

OPEN PRs

21
VersionTagPublished
4.0.3
latest
4mos ago
4.0.3-next.0
next
5mos ago
No alternatives found
No tutorials found
Add a tutorial
No dependencies found

Rate & Review

100
No reviews found
Be the first to rate