@element-public/react-chips

Chips

Description

Chips are used to represent small blocks of information that the user has entered or selected. They can be one of the types Choice, Filter, or Input

See live demos on storybook

Storybook Chips Demos

Install bundle from npm-e

npm i @element-public/react-components @element-public/themes

Optional: install the component individually

npm i @element-public/react-chips @element-public/themes

Please Note: You will need to add @element-public to your .npmrc!

Open ~/.npmrc in an editor and add the following line to enable the @element-public scope:

@element-public:registry=https://npm.platforms.engineering

Troubleshooting

See below if you have never installed a package from Bayer's npm-enterprise or run into the following error:

npm ERR! code E401
npm ERR! Unable to authenticate, your authentication token seems to be invalid.
npm ERR! To correct this please trying logging in again with:
npm ERR!     npm login

Setup an access token

See the devtools npm-e guide to learn how to create an access token if this is the first time you are using a npm-e package at Bayer or you do not have a line that starts with the following in your ~/.npmrc file:

//npm.platforms.engineering/:_authToken=

Notes

Notable props that are unique for each Chip include chipIdField, chipKeyField, and chipLabelField. Other important props include variant, which details whether the Chip is filled or outlined, scrollable, which determines whether Chips break on a newline in a list, preventChoiceDeselection, which prevents certain Chips from being deselected by a user, and input, which determines whether Chips can be dynamically added and removed.

Usage

Chips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Each chip requires a unique key which can be configured with the chipKeyField property. It defaults to looking at the id field in each chip.

For filter and choice chips, two way data binding is accomplished via onUpdateSelectedChips and selectedChips props. For input chips, two way data binding is accomplished via onUpdateChips and chips props. Input chips may be either choice or filter.

Chips can include Leading or Trailing Icons. If no Leading or Trailing Icon is set, a material icon rendering the leadingIconField, or trailingIconField, of each chip is used.

Chips Props

Name	Type	Default	Required	Description
chipIdField	string	empty string	false	The property on each chip that represents the id. If one is not provided material will generate an automatic ID.
chipKeyField	string	'id'	false	The property on each chip that is used as a unique key.
chipLabelField	string	'label'	false	The property for the label on each chip. The labelRenderer overrides the rendering of the label field
chips	[]	[]	true	Array of chips to manager and render.
disabled	boolean	false	false	Prevent the user from interacting with the chips.
input	boolean	false	false	Allows chips to be dynamically added and removed upon trailing icon interaction.
labelRenderer	React.ReactNode|function	null	false	Returns the label to be rendered on each chip. Receives the chipData.
leadingIcon	Function	null	false	Leading icon render function. chip and iconProps is passed into the params. iconProps contains all the props for the icon component. If unused, a material icon rendering the leadingIconField of each chip is used
leadingIconField	string	'leadingIcon'	false	Leading icon property name for each chip. The leading icon property can either be a string corresponding to an icon, or an object containing all the properties for the icon component.
preventChoiceDeselection	boolean	false	false	Prevents choice chips from being deselected upon interaction.
scrollable	boolean	false	false	Chips do not break on a newline. The user must scroll horizontally if there is any overflow.
selectedChips	[]	[]	false	Array of currently selected chips.
selectionType	string	'default'	false	Filter enables selection of multiple chips and will add a check mark to selected chips. Choice allows only one selected chip. Accepted Values: default, choice, filter
trailingIcon	Function	null	false	Trailing icon render function. chip and iconProps is passed into the params. iconProps contains all the props for the icon component. If unused, a material icon rendering the trailingIconField of each chip is used
trailingIconField	string	'trailingIcon'	false	Trailing icon property name for each chip. The trailing icon property can either be a string corresponding to an icon, or an object containing all the properties for the icon component.
variant	string	'filled'	false	Shows chips as filled or outlined. Accepted Values: filled, outlined

Chips Events

Name	Default	Required	Params	Description
onInteraction	undefined	false	1. Name: undefined, Type: object, Description: Chip that was interacted with	Fired when the chip is interacted with (via click/tap or Enter key).
onRemoval	undefined	false	1. Name: undefined, Type: object, Description: Chip that was removed	Fired when a chip is removed.
onUpdateChips	undefined	false	1. Name: undefined, Type: array, Description: Array of chips	Fired when the chips are removed (input chips only).
onUpdateSelectedChips	undefined	false		Fired when the selected chips are updated (choice and filter chips only).

Chips Breaking Changes

Description
choice (removed): See selectionType=choice
filter (removed): See selectionType=filter

Chip Props

Name	Type	Default	Required	Description
chipData	any	null	true	Chip data to be rendered. If no label is passed in, chipData will be used. If using an object, use the chipLabelField to set property to be rendered as the label. You may also set leadingIconField and trailingIconField, as well as labelRenderer for additional control.
chipIdField	string	empty string	false	The property on the chip that represents the id. If one is not provided material will generate an automatic ID.
chipLabelField	string	empty string	true	The property on the chip that is the label. The default slot overrides the rendering of the label.
disabled	boolean	false	false	Prevent the user from interacting with the chip.
id	string	undefined	false	Custom id.
initiallySelected	boolean	null	true	If the chip is selected on mount.
input	boolean	null	true	Allows chip to be dynamically added and removed upon trailing icon interaction.
labelRenderer	React.ReactNode|function	null	false	Returns the label to be rendered on each chip. Receives the chipData.
leadingIcon	Function	null	false	Slot for leading icon. chip and iconProps is passed into the slots params. iconProps contains all the props for the icon component. If there is no leading icon, a material icon rendering the leadingIconPropName of each chip is used.
leadingIconField	string	empty string	true	Leading icon property name for the chip. The leading icon property can either be a string corresponding to an icon, or an object containing all the properties for the icon component.
selectionType	string	'default'	false	The typefilter enables selection of multiple chips and will add a check mark to selected chips. The typechoice allows only one selected chip. Accepted Values: default, choice, filter
trailingIcon	Function	null	false	Slot for trailing icon. chip and iconProps is passed into the slots params. iconProps contains all the props for the icon component. If there is no trailing icon, a material icon rendering the trailingIconPropName of each chip is used.
trailingIconField	string	empty string	true	Trailing icon property name for the chip. The trailing icon property can either be a string corresponding to an icon, or an object containing all the properties for the icon component.
variant	string	'filled'	true	Applies the selected style. Accepted Values: filled, outlined

Chip Render Props

Name	Type	Default	Required	Description
label	React.ReactNode	null	false	The label to be rendered on each chip. Optionally chipData and chipLabelField may be used instead of label.

Chip Events

Name	Default	Required	Params	Description
onClick	undefined	false		Called when chip is clicked.
onDestroy	undefined	false		Fired when the chip is destroyed.
onEnter	undefined	false		Called when Enter is pressed.
onMounted	undefined	false		Fired when the chip is mounted.

Chip Breaking Changes

Description
children (removed): See label.
filled (removed): See variant=filled.
outlined (removed): See variant=outlined.
selected (removed): This is no longer needed.