Radio select - Web Component

The RadioSelect component can be used imported from:

Playground

Parameters

The Web component uses the <z-radio-select> 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
label	string	The label of the input
options	Object []	List of options to choose from
config	string	The configuration of the input
disabled	boolean	Blocks the interaction with the input component.
required	boolean	Marks the input component as required.
name	string	Identification for the field inside the form
help-text	string	The forced message to be shown under the input	help-text
invalid	boolean	The forced state for set the input as invalid

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
label	span
help-text	span

Parameters use

options

The options parameter is used to set the options of the radio select. The option object should contain the text and value keys.

We can use <option> tags to define the values of options

Option 1Option 2Option 3

label

The label parameter is used to set the text label of the component. Make sure you always use it.

Option 1Option 2Option 3

config

The config parameter is used to display the radio select also inline. Setting config="inline" will display the radio select inline.

Option 1Option 2Option 3

name

The name parameter is used to set the name of the component. This is useful when the component is part of a form.

help-text

The help-text parameter is provide a text indication:

Option 1Option 2Option 3

Flags

disabled

The disabled parameter is used to block the interaction with the component.

Option 1Option 2Option 3

invalid

The invalid parameter is used make the whole input invalid.

Option 1Option 2Option 3

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:

Option 1Option 2Option 3

Value:  undefined

Browser support

Detected engine:  

• Chromium

• Webkit

• Gecko

HTML Examples

CodeSandbox example