# Checkbox

# Default

Documentation Vuesax 4.0+

These documents refer to the latest version of vuesax (4.0+), to see the documents of the previous versions you can do it here 👉 Vuesax 3.x

Agrega un input de tipo checkbox fácilmente y con una hermosa animación

Option

Code copied

# color

Cambia el color de el componente con la propiedad color, los valores permitidos son (colores principales de vuesax, RGB, HEX)

Code copied

# Boolean Value

Por defecto el componente es usado con un valor boolean que al estar en checked retorna true y al no estar checked retorna false

true

false

Code copied

# String Value

Puedes necesitar retornar un string al estar el componente en checked para ello usa la propiedad val con el string que quieres retornar

Save data automatically

null

Code copied

# Array Value

El valor de el componente puede ser un Array si la propiedad val de el checkbox no se encuentra entre los valores se va a agregar de lo contrario se eliminara

Code copied

# Array Object values

la propiedad val de un componente checkbox puede ser un object

Webpack

Typescript

Sass

[
  {
    "github": "https://github.com/webpack/webpack",
    "name": "Webpack"
  }
]

Code copied

# Icon

Cambia el icono dentro de el componente checkbox con el slot="icon"

Iconos por defecto

Vuesax no usa ninguna librería o fuente de iconos por defecto, con esto damos la libertad de usar la que prefieras Todos los componentes que usen en algún lugar un icono por defecto como el de close en un Alert o un Popup va a ser un svg para no tener que instalar ningún tipo de fuente externa, y se podrá sustituir con un slot="icon" por el icono de su preferencia

Vuesax Docs Icons

Estos documentos y los ejemplos usan la libreria de componentes boxicons, no es obligatoria o necesaria para el uso de Vuesax pero la recomendamos por su amplia gama de iconos y como complementan visualmente el framework

Code copied

# Label

Agrega un label al checkbox con el slot default del componente

Label

Label Before

Code copied

# Loading New

Agrega un estado de cargando al componente con la propiedad loading

Loading checked

Loading unchecked

Code copied

# LineThrough New

Agrega una linea en el medio de el label cuando el checkbox esta en checked con la propiedad line-through

Option

Code copied

# Indeterminate New

Hay algunos casos en que tienes varios checkbox y necesitas uno que gestione a todos los demás para ello puedes hacerlo con la propiedad indeterminate que agrega un estilo distinto al checkbox

Option

Code copied

# API

props

Property	Type	Values	Description	default	Example
v-model	boolean, string, array	boolean string array	determina el valor de el checkbox y anclaje de datos.	false	Usage Open Close
`<template> <div class="center"> <vs-checkbox v-model="option"> Option </vs-checkbox> </div> </template>`
color	string	vuesax colors RGB HEX	Cambia el color de el componente.	false	Usage Open Close
`<template> <div class="center"> <vs-checkbox v-model="option1"> Primary </vs-checkbox> <vs-checkbox success v-model="option2"> Success </vs-checkbox> <vs-checkbox danger v-model="option3"> Danger </vs-checkbox> <vs-checkbox warn v-model="option4"> warning </vs-checkbox> <vs-checkbox dark v-model="option5"> dark </vs-checkbox> <vs-checkbox color="#7d33ff" v-model="option6"> dark </vs-checkbox> <vs-checkbox color="rgb(59,222,200)" v-model="option7"> RGB </vs-checkbox> </div> </template>`
val	string, object	string object	determina el valor de el input al estar en checked.	true	Usage Open Close
`<template> <div class="center con-checkbox"> <vs-checkbox val="automatically" v-model="option"> Save data automatically </vs-checkbox> <span class="data"> {{ option ? option : 'null'}} </span> </div> </template>`
loading	boolean	true false	Agrega una animación de loading y deshabilita el input.	false	Usage Open Close
`<template> <div class="center con-checkbox"> <vs-checkbox loading v-model="option"> Loading checked </vs-checkbox> <vs-checkbox loading v-model="option2"> Loading unchecked </vs-checkbox> </div> </template>`
line-through	boolean	true false	Agrega una linea en el centro de el label cuando esta en checked .	false	Usage Open Close
`<template> <div class="center"> <vs-checkbox line-through v-model="option"> Option </vs-checkbox> </div> </template>`
indeterminate	boolean	true false	Cambia el icono por defecto de el checkbox a una linea que representa dato indeterminado.	false	Usage Open Close
`<template> <div class="center"> <vs-checkbox indeterminate v-model="option"> Option </vs-checkbox> </div> </template>`
label-before	boolean	true false	Cambia la posición del label.	false	Usage Open Close
`<vs-checkbox label-before v-model="option2"> Label Before </vs-checkbox>`
checked	boolean	true false	determina si el componente inicialmente esta en check (esto hace que cambie la propiedad computada en v-model a true).	false	Open Close
`<vs-checkbox label-before v-model="option2"> Label Before </vs-checkbox>`

slots

Property	Type	Description	Example
icon	slot	Cambia el icono del componente.	Usage Open Close
<template> <div class="center"> <vs-checkbox v-model="option1"> <template #icon> <i class='bx bx-check' ></i> </template> </vs-checkbox> <vs-checkbox success v-model="option2"> <template #icon> <i class='bx bx-check-double'></i> </template> </vs-checkbox> <vs-checkbox danger v-model="option3"> <template #icon> <i class='bx bx-x'></i> </template> </vs-checkbox> <vs-checkbox warn v-model="option4"> <template #icon> <i class='bx bxs-shield'></i> </template> </vs-checkbox> <vs-checkbox dark v-model="option5"> <template #icon> <i class='bx bxs-heart' ></i> </template> </vs-checkbox> <vs-checkbox color="#7d33ff" v-model="option6"> <template #icon> <i class='bx bx-brightness' ></i> </template> </vs-checkbox> <vs-checkbox color="rgb(59,222,200)" v-model="option7"> <template #icon> <i class='bx bxs-paint' ></i> </template> </vs-checkbox> </div> </template>
default	slot	Agrega un label al componente.	Usage Open Close
`<template> <div class="center"> <vs-checkbox v-model="option"> Option </vs-checkbox> </div> </template>`

Input Switch