Skip to content 
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
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.
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.
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