Selection tag - Web Component

The SelectionTag component can be used imported from:

Playground

Parameters

...

Common API

For the basics, check the common specifications.

Events

This component has events. Check the documentation about how to use the events.

Name	Payload	Description
`change`	`boolean`	Returns the new value of the "value" attribute
`restarted`	`void`	Emitted on value reset
`blur`	`void`	Emitted on blur
`validated`	`boolean`	Emitted when the validation status changes

Slots

This component has slots. Check the documentation about how to use the slots.

Name	Tags	Description
`default`	`span`

Parameters use

`content`

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

Tag label

`model` & `checked`

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

`name`

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

Flags

`disabled`

The attribute disabled will block the interaction with the component.

Methods

`reset()`

We can all the reset() method of the WebComponent in order to reset the value. This will clean the internal states and emit the nullable value with the change event, plus a restarted event:

In this example, the button triggers the method:

Value: false

Browser support

Detected engine:

Chromium
Webkit
Gecko

Selection tag - Web Component ​

Playground ​

Parameters ​

Events ​

Slots ​

Parameters use ​

content ​

model & checked ​

name ​

Flags ​

disabled ​

Methods ​

reset() ​

Browser support ​

HTML Examples ​

CodeSandbox example ​