@paprika/list-box-with-tags NPM

@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.