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 | ||
value | 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 array of objects that represent the chips. Each object inside the array 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:
value
The value attribute is an array of strings that represent the selected chips.
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.
required
The required attribute is a boolean that sets the chips to required mode.
Browser support
Detected engine:
Chromium
Webkit
Gecko