Chips set - Web Component

The ChipsSet component can be used imported from:

Playground

Parameters

...

Events

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

Name	Payload	Description
change	string[]	Returns the new value of the "value" attribute
restarted	void	Emitted on value reset

Slots

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

Name	Tags	Description
default	span
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

Chip 1Chip 2Disabled chipChip 4

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:

Chip 1Chip 2Disabled chipChip 4Chip 1Chip 2Disabled chipChip 4

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.

Chip 1Chip 2Disabled chipChip 4

Flags

disabled

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

Chip 1Chip 2Disabled chipChip 4

readonly

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

Chip 1Chip 2Disabled chipChip 4

Browser support

Detected engine:  

• Chromium

• Webkit

• Gecko

HTML Examples

CodeSandbox example