Selection tag - Web Component

Browser support

Detected engine:  

• Chromium

• Webkit

• Gecko

Parameters

The Web component uses the <z-selection-tag> tag:

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

Name	Type	Description
content	string	The text content of the selection tag
disabled (optional)	boolean	Disables the selection tag

The events emitted from the component are:

Name	Payload	Description
onchange	boolean	Returns the new value of the "value" attribute

The available slots for the component are:

Name	Tags	Description
default	span

Common API

For the basics, check the common specifications.

content

The z-selection-tag parameter accepts a content attribute to set the text label of the component.

Tag label

value & checked

Both value and checked parameters are used to set the value of the component.

disabled

The attribute disabled will block the interaction with the component.

name

The attribute name will set the name of the component. This is useful when the component is part of a form.

The color and the size of the icon can be customized using the --z-selection-tag--color, --z-selection-tag--color--off and --z-selection-tag--size CSS custom properties.

Playground

Customization

HTML Examples

Imports

<link rel="stylesheet" href="/0.5.1/@zurich/web-components/styles.css" />
<script type="module" src="/0.5.1/@zurich/web-components/selection-tag.js"></script>

Code

<z-selection-tag>Tag</z-selection-tag>
<z-selection-tag disabled>Tag</z-selection-tag>

<z-selection-tag checked>Tag</z-selection-tag>
<z-selection-tag checked disabled>Tag</z-selection-tag>