Chip

The Chip component allows the user to select a value from a defined range. Either by using continuous Chip, stepped Chip or buffered Chip.

Import

React

// with @dhl-official/react-library:
import { DhlChip } from "@dhl-official/react-library"

// with @dhl-official/ui-libraries/react-library:
import { DhlChip } from "@dhl-official/ui-libraries/react-library"

Angular

If the DUIL has been installed, you can use the web component directly:

<dhl-chip></dhl-chip>

Vue.js

// with @dhl-official/vue-library:
import { DhlChip } from "@dhl-official/vue-library"

// with @dhl-official/ui-libraries/vue-library:
import { DhlChip } from "@dhl-official/ui-libraries/vue-library"

Code

React

<DhlChip />

Angular

<dhl-chip />

Vue.js

<dhl-chip />

Interactive Demo

Example

<DhlChip 
  variant="gray" 
  hasCancelIcon={true} 
  hasCheckIcon={true}>
  Chip
</DhlChip>

Chip

Migrating from DUIL 1.0

• Rename disabled to isDisabled

Readme

Properties

Property	Attribute	Description	Type	Default
cancelLabel	cancel-label	An optional string to set aria-label on the cancelIcon	string	"Remove last item"
clickEvent	--	An optional onClick callback handler.	(e: any) => void	undefined
dataTestid	data-testid	An optional prop. The test id attached to the component as a data-testid attribute.	string	undefined
hasCancelIcon	has-cancel-icon	An optional boolean to toggle the display of the cancel icon	boolean \| string	false
hasCheckIcon	has-check-icon	An optional boolean to toggle the display of the check icon	boolean \| string	false
isButton	is-button	An optional boolean to set to false when it is used inline with no key/mouse action	boolean	true
isDisabled	is-disabled	An optional flag to define if the component is disabled.	boolean	false
value	value	An optional prop to uniquely identify the chip.	string	undefined
variant	variant	An optional prop to select a component design variant.	"basic" \| "gray" \| "red"	DHL_CHIP.VARIANT.BASIC

Events

Event	Description	Type
remove	Custom event that gets emitted when the chip is removed	CustomEvent<any>

Slots

Slot	Description
"unnamed"	unnamed children slot for text that accompanies the DhlChip

Dependencies

Used by

• dhl-dropdown

Depends on

• dhl-icon

Graph

---

Built by DHL User Interface Library Team!