Radio select - Web Component ​

The RadioSelect component can be used imported from:

Playground ​

Parameters ​

...

Events ​

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

NamePayloadDescription
changestringReturns the new value of the "value" attribute
restartedvoidEmitted on value reset
blurvoidEmitted on blur
validatedbooleanEmitted when the validation status changes

Slots ​

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

NameTagsDescription
labelspan
help-textspan

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

label ​

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

config ​

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

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:

Flags ​

disabled ​

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

invalid ​

The invalid parameter is used make the whole input invalid.

The default text adapts to the localization:

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:  undefined

Browser support ​

Detected engine:  

  • Chromium

  • Webkit

  • Gecko

HTML Examples ​

CodeSandbox example ​