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

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