LvCheckbox component can be used in projects where a way is required for user to select or deselect an option.

# Playground

 <LvCheckBox
     type="checkbox"
     name="demo"
     color="success"
     :thick="true"
     :pulse="true"
     :outline="true"
 />
Realtime Customizations


















#Basic

You can use the checkbox with various predefined colors by passing them in color prop, avaliable colors are sucess,warning,primary,info,danger. You can set the corners of checkbox to round by setting rounded prop to true.You can change the appearance of checkbox through thick,filled,plain,smooth. LightVue checkbox is Both compatible with Vue 2.x and Vue 3.x

#With Animations

You can use the checkbox with various predefined Transitions by setting smooth,pulse props to true

#Radio

You can use the checkbox component as a Radio by setting type prop to radio all the other variations you use with the checkbox you can use them with radio also in the same way

#Disabled

You can use the checkbox to Disable by passing disabled prop to true

#With Icons

You can use the icons with checkbox by passing then in the slot and setting icon prop to true

#Scalable sizes

You can set the checkbox size by wrapping it inside a element

#Setup

You can import a component and register it as a local and global vue component as follows:

// import the component
import LvCheckBox from 'lightvue/CheckBox';
// Register the component locally
export default {
    components: {
        LvCheckBox
    }
}
// Register the component globally (Vue 2.x)
Vue.component('LvCheckBox', LvCheckBox);

// Register the component globally (Vue 3.x)
const app = Vue.createApp({
  // ...
});
app.component('LvCheckBox', LvCheckBox);
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