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

Storybook InputChip 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-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. |