Radio select - Web Component โ
Browser support โ
Parameters โ
The Web component uses the <z-radio-select>
tag:
The parametrization of the component can be done with the following custom HTML params:
Name | Type | Description |
---|---|---|
options | Object [] | List of options to choose from |
label | string | The label of the input |
config (optional) | string | The configuration of the input |
disabled (optional) | boolean | Blocks the interaction with the input component. |
required (optional) | boolean | Marks the input component as required. |
name (optional) | string | Identification for the field inside the form |
invalid (optional) | boolean | The forced state for set the input as invalid |
The events emitted from the component are:
Name | Payload | Description |
---|---|---|
onchange | string | Returns the new value of the "value" attribute |
options
โ
The options
parameter is used to set the options of the radio select. The option object should contain the text
and value
keys.
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.
disabled
โ
The disabled
parameter is used to block the interaction with the component.
name
โ
The name
parameter is used to set the name of the component. This is useful when the component is part of a form.
invalid-text
โ
The invalid-text
parameter is used to force the component to be invalid, and set the invalid message.
Playground โ
Customization โ
HTML Examples โ
Imports
html
<link rel="stylesheet" href="/0.4.3/@zurich/web-components/styles.css" />
<script type="module" src="/0.4.3/@zurich/web-components/radio-select.js"></script>
Code
html
<z-radio-select value="HTML" label="Input label" name="radio-select"
options='[{ "text": "HTML", "value": "HTML"}, { "text": "CSS", "value": "CSS"},{ "text": "JavaScript", "value": "javascript"}]'>
</z-radio-select>