Checkbox Group
LvCheckboxGroup component can be used when user needs to select or deselect options from a given array of options.
#Basic
You can pass the options in lv-checkbox-group as an array of objects. You can still use all the props and variations in the LvCheckbox. LightVue checkbox-group is Both compatible with Vue 2.x and Vue 3.x
#Set option value
You can set the option value and label through
#Array of strings
You can also use array of strings for options
#Preselect Value
You can set the value selected by default by setting it as an v-model value
#Setup
You can import a component and register it as a local and global vue component as follows:
// import the component
import LvCheckboxGroup from 'lightvue/checkbox-group';
// Register the component locally
export default {
components: {
LvCheckboxGroup
}
}// Register the component globally (Vue 2.x)
Vue.component('LvCheckboxGroup', LvCheckboxGroup);
// Register the component globally (Vue 3.x)
const app = Vue.createApp({
// ...
});
app.component('LvCheckboxGroup', LvCheckboxGroup);
app.mount('#app')
#APIs
All of the props, events and slots of the component are mentioned below:
Props
Type
Default
Description
name
String
Specifies name of the control, and is useful when dealing with forms submitted directly to a URL
modelValue
Array
Specifies the model value of the checkbox
trueValue
Array
Specifies the true value of the checkbox
falseValue
Array
Specifies the false value of the checkbox
checked
Array
Checks the checkbox by default
disabled
Array
Disables the checkbox
required
Array
Checkbox is required to be selected
intermediate
Array
Adds an intermediate value to the checkbox
color
String
Defines the color of the checkbox
offcolor
String
Defines the off color of the string in the checkbox
hovercolor
String
Defines the hover color of the checkbox
interminatecolor
String
Defines the interminate color of the checkbox
toggle
Array
Defines the toggle value of the checkbox
hover
Array
Defines the hover value of the checkbox
focus
Array
Defines the focus value of the checkbox
rounded
Boolean
False
Configures if the checkbox is rounded or not
thick
Boolean
False
Configures if the checkbox is thick or not
pulse
Boolean
False
Configures if the checkbox has pulse or not
outline
Boolean
False
Configures if the checkbox has outline or not
smooth
Boolean
False
Configures if the checkbox has smooth transition or not
plain
Boolean
False
Configures if the checkbox is plain or not
icon
Boolean
False
Configures if the checkbox has an icon or not
bigger
Boolean
False
Configures if the checkbox is bigger or not
locked
Boolean
False
Configures if the checkbox is locked or not
Slots
Description
off-extra
An extra slot when checkbox is off
off-label
Label slot when checkbox is off
hover-extra
An extra slot when hovered over checkbox
hover-label
Label slot when checkbox is hovered
intermediate-extra
An extra slot when checkbox is on intermediate state
intermediate-label
Label slot when checkbox is on intermediate state