# Checkbox with label

Content provided to default slot will be placed inside checkbox label

<checkbox>Simple text label</checkbox>
<checkbox value="true">Simple text label for checked checkbox</checkbox>
<checkbox disabled>Simple text label for disabled checkbox</checkbox>
<checkbox disabled value="true">Simple text label for disabled checked checkbox</checkbox>

# No label checkbox

If not content is provided in default slot, checkbox will appear without any text. This can be useful when building selectable items in tables or lists.

<checkbox/>
<checkbox value="true"/>
<checkbox disabled />
<checkbox disabled value="true" />

# Using checkbox with array

Use v-model with an array and checkbox-value prop. This way whenever checkbox is checked, value of checkbox-value prop will be added to array bound by v-model. This can be useful when you need to collect information about checked checkboxes only.

This is how checkboxes variable will look like: []

<checkbox v-model="checkboxes" checkbox-value="first">Checkbox with value `first`</checkbox>
<checkbox v-model="checkboxes" checkbox-value="second">Checkbox with value `second`</checkbox>
<checkbox v-model="checkboxes" checkbox-value="third" >Checkbox with value `third`</checkbox>
export default {
    data(){
        return { 
            checkboxes:[],
        }       
    }
}

Assuming that checkboxes is array, if we check all checkboxes, then the array would look like this: [first, second, third] We can also use bounded array to control which checkbox should be checked by populating the checkboxes array with corresponding checkbox-value values. When using array to control checkbox values it is recommended to use checkbox-value props, otherwise there might be unexpected results.

# Using checkbox with an object or single variables

You can also use objects or simple boolean variables to control the

This is how checkboxesObject variable will look like:


{
  "first": true,
  "second": false,
  "third": false
}

And this is the code for example above

<checkbox v-model="checkboxesObject.first">Checkbox with v-model `checkboxesObject.first`</checkbox>
<checkbox v-model="checkboxesObject.second">Checkbox with v-model `checkboxesObject.second`</checkbox>
<checkbox v-model="checkboxesObject.third">Checkbox with v-model `checkboxesObject.third`</checkbox>
export default {
    data(){
        return { 
            checkboxesObject:{
                first:true,
                second:false,
                third:false,  
            },
        }       
    }
}

# Props

name default description required type
label Label for checkbox false String
value false Is checkbox checked. Can be either boolean true/false or string "checked"/"" values false 0
disabled false If set to true - checkbox will be disabled false Boolean
name Name attribute for checkbox input false String
checkboxValue Value attribute for checkbox input false String
showAsSwitch If set to true - checkbox will appear as switch false Boolean