Skip to content

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