Chips set - Web Component ​

The ChipsSet component can be used imported from:

Playground ​

Parameters ​

The Web component uses the <z-chips-set> tag:

By default, all the parameters are optional or can be set in different, except for the ones marked as required

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

NameTypeDescriptionSlotA11y
optionsobject[]List of options for the chips
configstringConfiguration of the chip set
modelstring[]Value of the selected chips
disabledbooleanDisables the input
readonlybooleanMakes the input read-only
requiredbooleanMakes the input required

Events ​

This component has events. Check the documentation about how to use the events.

NamePayloadDescription
changestring[]Returns the new value of the "value" attribute
restartedvoidEmitted on value reset

Slots ​

This component has slots. Check the documentation about how to use the slots.

NameTagsDescription
defaultspan
option-<opt>span

Parameters use ​

options ​

The options attribute is an dictionary of objects that represent the chips. Each object inside the dictionary, where the key is the value, should have the following properties:

  • text: The text that will be displayed inside the chip.
  • disabled: A boolean that indicates if the chip is disabled.

We can use <option> tags to define the values of options

config ​

The config attribute is used to set the shape and size of the chip set. It is an object that can have the following properties:

model ​

The value attribute is an array of strings that represent the selected chips. Only the ones in this array will be the ones represented from the collection of options.

Flags ​

disabled ​

The disabled attribute is a boolean that blocks the user from interacting with the chips.

readonly ​

The readonly attribute is a boolean that sets the chips to read-only mode.

Browser support ​

Detected engine:  

  • Chromium

  • Webkit

  • Gecko

HTML Examples ​

CodeSandbox example ​