@element-public/react-input-chip NPM

InputChip

Description

A combination of a Textfield with Chips for entering multiple small pieces of information, such as filter fields.

See live demos on storybook

Install bundle from npm-e

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

Optional: install the component individually

npm i @element-public/react-input-chip @element-public/themes

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

Chips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Input Chips are used to represent small blocks of custom information that the user has entered by typing a label into a Textfield. A basic demonstration of this behavior can be found on the 'Input Custom' story, under the Chips tab, on Storybook. The Input Chip tab lists more specific details and examples.

One use of the Input Chip is setting it as contained or uncontained. Setting the input as contained shows the entered chips inside the Textfield, whereas setting the input as uncontained lists the entered chips outside of the Textfield.

Another possible variation of the Input Chip is to make it outlined, which puts a dark line around the Textfield where users input their custom chip labels.

Another possible variation of the Input Chip is to make the list of chips scrollable. This enables the user to scroll, with a mouse or trackpad, through the list of chips, if the list is longer than the alloted window.

A few notable props for Input Chip include allowDuplicates, which if true, allows a user to add multiple chips with the same label, anchorInput, which determines whether inputs show up before or after the uncontained chip list, and resetValue, which determines what the input value will be set to after a chip is added.

Input Chip Props

Name	Type	Default	Required	Description
allowDuplicates	boolean	false	false	If true, a user can add duplicate chips.
anchorInput	boolean	false	false	Available for Uncontained Input Chip, inputs that are anchored show up before the chip list instead of after.
chips	string\|object	[]	false	Value of the chips array. If the chips array is to be controlled by the parent for two way data binding. this must be defined. If no initial array is needed, set to an empty array
chipsProps	object	{}	false	Custom props to be sent to each `Chip`. Props that will be sent through to `Chips` are 'scrollable', `variant`, `onRemoval`, `chipIdField`, `chipKeyField`, `chipLabelField`. See `Chips` docs for more information.
contained	boolean	false	false	If true, the chips will be contained in the `Textfield`.
containerProps	object	undefined	false	Custom props to be sent to the container. Notes, this is only used when `contained=true`.
disabled	boolean	false	false	Prevent the user from interacting with the input.
resetValue	string	empty string	false	What the input value will be set to after chip is added.
textfieldProps	object	{}	false	Custom props to be sent to the `Textfield`. See `Textfield` docs for more information.

Input Chip Events

Name	Default	Required	Params	Description
onAdd	null	false	1. Name: chip, Type: string, Description: Chip that was added.,2. Name: event, Type: object, Description: The javascript event	Callback fired when a chip is added.
onBlur	null	false
onFocus	null	false

Input Chip Breaking Changes

Description
outlined (removed): Use variant in chipsProps instead.
placeholder (removed): Use label in textfieldProps instead.
scrollable (removed): Use scrollable in chipsProps instead.
wrap (removed): No longer needed. Chips will wrap by default.

clsx rooks prop-types react-select @babel/runtime-corejs3 @element-public/react-icon @element-public/react-chips @element-public/react-common @element-public/react-select @element-public/react-textfield

@element-public/react-components

1.0.0

1 year ago