Checkbox

  1. Home
  2. Form Elements
  3. Checkbox
ChatEmailCalendar

Basic Checkboxes

Custom Checkboxes

Add .custom-control .custom-checkbox as a single wrapper & add .custom-control-label for better output.

Vuexy Checkboxes

To add a checkBox, we have the .vs-checkbox-con as a wrapper. Also use .vs-checkbox for better output.

  • Active
  • Inactive
  • Active - disabled
  • Inactive - disabled

Color

To change the color of the checkBox use the .vs-checkbox-{value} for primary, success, danger, info, warning.

  • Primary
  • Success
  • Danger
  • Info
  • Warning

Change Icon

Use .vs-icon to change change the internal icon inside the checkbox.

  • Primary
  • Success
  • Danger
  • Info
  • Warning

Vuexy Checkboxes Sizes

To add a checkBox with different sizes, we have the .vs-checkbox-sm and .vs-checkbox-lg for small and large checkboxes respectively. Add it alongwith .vs-checkbox class.

  • Small
  • Default
  • Large