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:
Name | Type | Description | Slot | A11y |
---|---|---|---|---|
options | object[] | List of options for the chips | ||
config | string | Configuration of the chip set | ||
model | string[] | Value of the selected chips | ||
disabled | boolean | Disables the input | ||
readonly | boolean | Makes the input read-only | ||
required | boolean | Makes the input required |
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.
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