Checkbox

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

Add a checkbox type input easily and with a beautiful animation

Code copied

color

Change the color of the component with the color property, the allowed values ​​are (main colors of vuesax, RGB, HEX)

Code copied

Boolean Value

By default the component is used with a boolean value that when being checked returns true and when not being checked returns false

Code copied

String Value

You may need to return a string when the component is checked for it use the val property with the string you want to return

null
Code copied

Array Value

You may need to return a string when the component is checked for it use the val property with the string you want to return

[ "javascript", "vue" ]
Code copied

Array Object values

the val property of a checkbox component can be an object

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

Icon

Change the icon inside the checkbox component with theslot="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

Add a label to the checkbox with the default slot of the component

Code copied

Loading New

Add a loading status to the component with the property loading

Code copied

LineThrough New

Add a line in the middle of the label when the checkbox is checked with the property line-through

Code copied

Indeterminate New

There are some cases where you have several checkboxes and you need one that manages all the others for this you can do it with the indeterminate property that adds a different style to the checkbox

Code copied

API

props

Property Type Values Description default Example More
v-model boolean, string, array boolean string array determine the value of the checkbox and data anchor. false Usage Open Close
<template>
  <div class="center">
    <vs-checkbox v-model="option">
      Option
    </vs-checkbox>
  </div>
</template>
color string vuesax colors RGB HEX Change the color of the component. 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 Determine the value of the input when being 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 Add a loading animation and disable the 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 Add a line in the center of the label when 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 Change the default checkbox icon to a line that represents undetermined data. false Usage Open Close
<template>
  <div class="center">
    <vs-checkbox indeterminate v-model="option">
      Option
    </vs-checkbox>
  </div>
</template>
label-before boolean true false Change the position of the label. false Usage Open Close
<vs-checkbox label-before v-model="option2">
  Label Before
</vs-checkbox>
checked boolean true false Determine if the component is initially in check (this changes the property computed in v-model to true). false Open Close
<vs-checkbox label-before v-model="option2">
  Label Before
</vs-checkbox>

slots

Property Type Values Description default Example More
icon slot Change the component icon. 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 Add a label to the component. Usage Open Close
<template>
  <div class="center">
    <vs-checkbox v-model="option">
      Option
    </vs-checkbox>
  </div>
</template>
Last Updated: 2/10/2020, 2:21:50 AM