Chips set

Chip 1Chip 2Disabled chip

Th ChipsSet component is a -R-D (from CRUD) that allows read and delete operations from a list of chips. It is a set of chips that can be selected (introduced via model) and deselected (via the component). It a chips manager.

UX/UI Guidelines

Check the design documentation of the component in ZeroHeight.

Implementations

The component ChipsSet is available in the following technologies:

Web Components

Parameters

Parameters

Make sure you have read about the parameters in here.

The parametrization of the component can be done with the following custom params or properties:

Name	Type	Slot	Description
options	object[]		List of options for the chips
config	string		Configuration of the chip set
model	string[]		Value of the selected chips
disabled	boolean		Disables the input
readonly	boolean		Makes the input read-only
required	boolean		Makes the input required
custom	object		A record of key-value pairs to set the CSS custom tokens. It's a complex attribute set as an JS object in stringified JSON format. Example: <z-chips-set custom='{"fill":"#06e7a3"}' /> Check the available values in the customization section.
custom-str	string		The stringified version of the custom property. It follows the pattern key:value;key:value;, with the possibility of setting multiple values and spaces between the punctuation characters. Example: <z-chips-set custom-str="fill:#06e7a3" />
z-theme	string		Sets the theme of the component. The possible values are light and dark. <z-chips-set z-theme="dark" />

From Figma to code

...

Customization

INFO

Check everything about the customization mechanics in the "How it works" documentation.

CSS Variable	Type	Description
--z-chips-set--bg	color	Background color for the lined type
--z-chips-set--bg--shaped	color	Background color for the shaped type
--z-chips-set--gap	distance	Gap between chips
--z-chips-set--padding	distance	Padding of the chips, inside the shaped type
--z-chips-set--radius--shaped	distance	Border radius for shaped chips set.

The background color of the chips set can be customized using the --z-chips-set--bg or --z-chips-set--bg--shaped for shaped type.

You can also customize the gap between the chips using the --z-chips-set--gap CSS custom property.

And finally for the shaped type you can customize the padding and radius using the --z-chips-set--padding and --z-chips-set--radius--shaped CSS custom properties.

Chip 1Chip 2Disabled chipChip 1Chip 2Disabled chip

Accessibility

...

Related components