Basic Checkboxes

Custom Checkboxes

Add .custom-control .custom-checkboxas a single wrapper & add .custom-control-labelfor better output.

Vuesax Checkboxes

To add a checkBox, we have the .vs-checkbox-conas a wrapper. Also use .vs-checkboxfor 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-iconto change change the internal icon inside the checkbox.

  • Primary
  • Success
  • Danger
  • Info
  • Warning

Vuesax Checkboxes Sizes

To add a checkBox with different sizes, we have the .vs-checkbox-smand .vs-checkbox-lgfor small and large checkboxes respectively. Add it alongwith .vs-checkboxclass.

  • Small
  • Default
  • Large