Skip to content

Multi-input

Implementations

The component MultiInput is available in the following technologies:

Web Components
webreactvueangular

Parameters

Parameters

Make sure you have read about the parameters in here.

The parametrization of the component can be done with the following custom params or properties:

NameTypeSlotDescription
configstring
labelstringLabel of the input
placeholderstringPlaceholder of the input
readonlybooleanTransforms the input into an output
autocompletestringAutomated assistance in filling out form field values
modelstring[]Value of the model
disabledbooleanBlocks the user from interacting with the input
requiredbooleanMakes the input required
namestringName of the input
help-textstringHelp text of the input
invalidbooleanSets the input as invalid
localestring
max-lengthnumberMaximum length of the input
max-itemsnumberMaximum number of items
data-liststring[]List of items to suggest
customobject

A record of key-value pairs to set the CSS custom tokens. It's a complex attribute set as an JS object in stringified JSON format.

Example:

html
<z-multi-input custom='{"fill":"#06e7a3"}' />

Check the available values in the customization section.

custom-strstring

The stringified version of the custom property. It follows the pattern key:value;key:value;, with the possibility of setting multiple values and spaces between the punctuation characters.

Example:

html
<z-multi-input custom-str="fill:#06e7a3" />
z-themestring

Sets the theme of the component. The possible values are light and dark.

html
<z-multi-input z-theme="dark" />

From Figma to code

...

Customization

INFO

Check everything about the customization mechanics in the "How it works" documentation.

No customization tokens yet implemented for this component

Accessibility

...