Web components | Radio | Made with Supernova


                                                        
                                                        
                                                            <template>
                                                          <w-stack direction="column" gap="medium">
                                                            <w-text type="subSectionHeading">
                                                              Default radio buttons
                                                            </w-text>
                                                            <w-stack direction="column" gap="small">
                                                              <w-radio name="radio-example" label="one" value="1"></w-radio>
                                                              <w-radio name="radio-example" label="two" value="2"></w-radio>
                                                              <w-radio name="radio-example" label="three" value="3"></w-radio>
                                                            </w-stack>
                                                            <w-text type="subSectionHeading">
                                                              Selected value is <span id="chosenRadio"></span>
                                                            </w-text>
                                                          </w-stack>
                                                        </template>
                                                        
                                                        <script type="module">
                                                        let selectedValue = 1;
                                                        const chosenRadio = document.querySelector('#chosenRadio');
                                                        chosenRadio.textContent = selectedValue;
                                                        
                                                        function onRadioChange(e) {
                                                          selectedValue = e.detail[0];
                                                          radios.forEach(radio => {
                                                            radio.modelValue = selectedValue;
                                                          });
                                                        
                                                          chosenRadio.textContent = selectedValue;
                                                        }
                                                        
                                                        const radios = document.querySelectorAll('w-radio');
                                                        radios.forEach(radio => {
                                                          radio.modelValue = selectedValue;
                                                          radio.addEventListener('update:modelValue', onRadioChange);
                                                        });
                                                        </script>

Name	Description	Type	Default
hint	Text displayed under the label with additional information	string
label Required	Label of the input element	string
required	Determines whether the input is required or not.	boolean
v-model model-value v2, wc checked v1	Controls whether the input is checked or not. Do not use empty string as the default value as it is evaluated as truthy by vue and will make the radio button selected by default.	boolean\|number\|string	null
name Required	Name of the radio	string
value Required	Value of the input	boolean\|number\|string
disabled	Controls whether the radio is disabled or not.	boolean	false

Name	Description	Type
v-model update:modelValue v2, wc change v1	Emit an event with the current state of the radio	{ "names": [ "Boolean, Number, String" ] }

Name	Description
hint	Use it to provide rich content for input hint. Takes precedence over hint property.

Radio

Props

Events

Slots