Tags select

Select is a form element that allows users to select one option from a given set of options.

UX/UI Guidelines

Check the design documentation of the component in ZeroHeight.

Implementations

The component TagsSelect is available in the following technologies:

Web Components

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:

Name	Type	Slot	Description
`config`	`string`		The main parameter has two components following the pattern: `<shape><?:size>`. `shape`: Establishes the styling of the input. Default value is `line` . Possible values are: `shaped` or `line`. , `size`: (optional) defines de size of the input. The default value is `m`, being omitted from the param. The possible values are: `m` or `l`.
`label`	`string`	✅	Label of the input
`placeholder`	`string`		Placeholder of the input
`readonly`	`boolean`		Transforms the input into an output
`autocomplete`	`string`		Automated assistance in filling out form field values
`model`	`string`		Value of the model
`disabled`	`boolean`		Blocks the user from interacting with the input
`required`	`boolean`		Makes the input required
`name`	`string`		Name of the input
`help-text`	`string`	✅	Help text of the input
`invalid`	`boolean`		Sets the input as invalid
`locale`	`string`
`options`	`object[]`		List of tags to choose from
`custom`	`object`		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-tags-select custom='{"fill":"#06e7a3"}' />` Check the available values in the customization section.
`custom-str`	`string`		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-tags-select custom-str="fill:#06e7a3" />`
`z-theme`	`string`		Sets the theme of the component. The possible values are `light` and `dark`. html `<z-tags-select 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

...

Tags select ​

Implementations ​

Parameters ​

From Figma to code ​

Customization ​

Accessibility ​

Related components ​