MyComponent component for Element React
A combination of a Textfield with Chips for entering multiple small pieces of information, such as filter fields.
- Verify that you have access to (https://docs.int.bayer.com/cloud/devops/artifactory/)[Bayer Artifactory]
- Verify your token is correctly set up in your .npmrc as per the link above
- Verify you have the @element scope configured in your .npmrc
- @element:registry=https://artifactory.bayer.com/artifactory/api/npm/npm-platforms-engineering/
- Install the component and themes bundles
- npm i @element/react-components @element/themes
- alternatively install the component individually along with the themes bundle npm i @element/react-input-chip @element/themes
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.
| 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. |
| id | string | undefined | false | Unique Id. |
| resetValue | string | empty string | false | What the input value will be set to after chip is added. |
| style | object | undefined | false | Styles for the grid. |
| textfieldProps | object | {} | false | Custom props to be sent to the Textfield. See Textfield docs for more information. |
| 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 | | |
| onTrailingIconClick | null | false | | Callback fired when a trailing Icon is clicked. |
| 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. |