Checkbox

Checkboxes are used when there are lists of options and the user may select any number of choices, including zero, one, or several. In other words, checkboxes are used for making non-mutually exclusive selections.


                                                        
                                                        
                                                            <template>
                                                          <div>
                                                            <w-checkbox label="I accept terms & conditions"></w-checkbox>
                                                          </div>
                                                        </template>
                                                        
                                                        <script type="module">
                                                        let isChecked = false;
                                                        
                                                        function updateAttribute(element, name, value) {
                                                          if (value) {
                                                            element.setAttribute(name, value);
                                                          } else {
                                                            element.removeAttribute(name);
                                                          }
                                                        }
                                                        
                                                        function onCheckboxToggle(event, value) {
                                                          updateAttribute(document.querySelector('w-checkbox'), 'model-value', value);
                                                        }
                                                        
                                                        document.querySelector('w-checkbox').addEventListener('update:modelValue', e => {
                                                          isChecked = !isChecked;
                                                          onCheckboxToggle(e, isChecked);
                                                        });
                                                        </script>

Props

Name	Description	Type	Default
hint	Text displayed under the label with additional information	string
label	Label of the input element	string
required	Determines whether the input is required or not.	boolean
aria-label	Defines a string value that labels an element.	string
error	Displays an error description and changes the style of the input	string, boolean
indeterminate	The checkbox is still either checked or unchecked as a state.	boolean	false
v-model model-value v2, wc checked v1	Controls whether the input is checked or not. If array is provided the input is checked if the array contains the value property.	boolean, array	false
value	Value of the input. Please note that value is required only if you pass array as v-model	boolean, number, string
disabled	Controls whether the checkbox is disabled or not.	boolean	false

Events

Name	Description	Type
v-model update:modelValue v2, wc change v1	If Array is passed into v-model this event emits an array of values from all selected checkboxes. If Boolean is passed into v-model this event emits if checkbox is checked or not regardless of its value.	{ "names": [ "Boolean, Array" ] }

Slots

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