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

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.

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 ​