ChipsSet ⚠️ Experimental

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
onChange	string[]	Returns the new value of the model
onRestarted	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

Check the documentation about how to use the parameters.

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

We can use slots to define the content of the cards with the option-<value> slot.

Chip 1Chip 2Disabled chipChip 4

model

Attention!

If you hardcode this value, it will not be reactive and the selection won't change. Use a variable instead and, ideally, a closed loop.

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

CodeSandbox example

Sorry, not available yet ☹️