Web components | Toggle | Made with Supernova


                                                        
                                                        
                                                            <template>
                                                          <w-toggle label="Basic toggle"></w-toggle>
                                                        </template>
                                                        
                                                        <script type="module">
                                                        const toggleBasic = document.querySelector('w-toggle');
                                                        toggleBasic.modelValue = false;
                                                        
                                                        function onUpdate({ detail: [value] }) {
                                                          toggleBasic.modelValue = value;
                                                        }
                                                        
                                                        toggleBasic.addEventListener('update:modelValue', onUpdate);
                                                        </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
model-value	Controls whether the input is checked or not.	boolean	false
reverse	Controls whether the content is in reverse order.	boolean	false
disabled	Sets the component as disabled.	Boolean	false

Name	Description	Type
update:modelValue	Emits if input is checked or not	{ "names": [ "Boolean" ] }

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

Toggle

Props

Events

Slots