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

Option

Code copied

• Template
• Script
• All

  <template>
    <div class="center">
      <vs-checkbox v-model="option">
        Option
      </vs-checkbox>
    </div>
  </template>

color

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

Primary

Success

Danger

warning

dark

HEX

RGB

Code copied

• Template
• Script
• All

  <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">
        HEX
      </vs-checkbox>
      <vs-checkbox color="rgb(59,222,200)" v-model="option7">
        RGB
      </vs-checkbox>
    </div>
  </template>

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

true

false

Code copied

• Template
• Script
• All

  <template>
    <div class="center">
      <vs-checkbox v-model="option1">
        {{ option1 }}
      </vs-checkbox>
      <vs-checkbox v-model="option2">
        {{ option2 }}
      </vs-checkbox>
    </div>
  </template>

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

Save data automatically

null

Code copied

• Template
• Script
• All

  <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>

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

Html

Css

Javascript

Vue

Vuesax

[ "javascript", "vue" ]

Code copied

• Template
• Script
• All

  <template>
    <div class="center con-checkbox">
      <vs-checkbox val="html" v-model="options">
        Html
      </vs-checkbox>
      <vs-checkbox val="css" v-model="options">
        Css
      </vs-checkbox>
      <vs-checkbox val="javascript" v-model="options">
        Javascript
      </vs-checkbox>
      <vs-checkbox val="vue" v-model="options">
        Vue
      </vs-checkbox>
      <vs-checkbox val="vuesax" v-model="options">
        Vuesax
      </vs-checkbox>

      <span class="data">
        {{ options }}
      </span>
    </div>
  </template>

Array Object values

the val property of a checkbox component can be an object

Webpack

Typescript

Sass

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

Code copied

• Template
• Script
• All

  <template>
    <div class="center con-checkbox">
      <vs-checkbox :val="{ github: 'https://github.com/webpack/webpack', name: 'Webpack' }" v-model="options">
        Webpack
      </vs-checkbox>
      <vs-checkbox :val="{ github: 'https://github.com/microsoft/TypeScript', name: 'Typescript' }" v-model="options">
        Typescript
      </vs-checkbox>
      <vs-checkbox :val="{ github: 'https://github.com/sass/sass', name: 'Sass' }" v-model="options">
        Sass
      </vs-checkbox>

      <pre class="data">
        <code>
    {{ options }}
        </code>
      </pre>
    </div>
  </template>

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

• Template
• Script
• All

  <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>

Label

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

Label

Label Before

Code copied

• Template
• Script
• All

  <template>
    <div class="center con-checkbox">
      <vs-checkbox v-model="option">
        Label
      </vs-checkbox>
      <vs-checkbox label-before v-model="option2">
        Label Before
      </vs-checkbox>
    </div>
  </template>

Loading New

Add a loading status to the component with the property loading

Loading checked

Loading unchecked

Code copied

• Template
• Script
• All

  <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>

LineThrough New

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

Option

Code copied

• Template
• Script
• All

  <template>
    <div class="center">
      <vs-checkbox line-through v-model="option">
        Option
      </vs-checkbox>
    </div>
  </template>

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

Option

Code copied

• Template
• Script
• All

  <template>
    <div class="center">
      <vs-checkbox indeterminate v-model="option">
        Option
      </vs-checkbox>
    </div>
  </template>

API