# Checkbox
Represents an independent or non-exclusive choice
# Usage
<template>
<winui-checkbox id="check_demo">Tick me!</winui-checkbox>
</template>
# Props
# id required
- Type:
string - Default:
undefined
The id of the checkbox. Required to bind the label to the input, must be unique in the whole page.
# name optional
- Type:
string - Default:
undefined
The name of the checkbox. Only needed to bind the checkbox to a form.
# value optional
- Type:
number|string|boolean - Default:
undefined
The value of the checkbox. This is the value that will be returned when the checkbox is checked.
# disabled optional
- Type:
boolean - Default:
undefined
The checkbox state. If true, the checkbox will be disabled.
# Customization
Use the class name .winui-checkbox to override/customize the component's styles.
# Examples
# Disabled state
<template>
<winui-checkbox id="check_disabled" disabled>
Disabled checkbox
</winui-checkbox>
</template>
# Handling two-way binding
<template>
<winui-checkbox id="check_binding" v-model="isChecked">
This check box is {{ isChecked ? "checked" : "unchecked" }}
</winui-checkbox>
</template>
<script>
export default {
data() {
return {
isChecked: false,
};
},
};
</script>