CheckBox

Aggressive and impacting effect and the most important functional

State

To add a checkBox, we have the vs-checkbox component which expects a principal parameter v-model that would be our value.

  • checkPrimary - active
  • checkPrimary - inactive
  • checkPrimary - active - disabled
  • checkPrimary - inactive - disabled

Colors

You can change the color of the checkBox with the property color. You are able to use the Main Colorsopen in new window or RGB and HEX colors.

WARNING

Only RGB and HEX colors are supported.

  • checkPrimary
  • checkSuccess
  • checkDanger
  • checkWarning
  • checkDark
  • checkColor RGB
  • checkColor HEX

Boolean Value

In most cases you will need a boolean data type while working with checkBoxes. For making this possible you have to link a boolean value in v-model.

  • checktrue
  • checkfalse

String Value

You can pass as a value a string by giving it as a value of the property vs-value.

  • null
  • checkluis daniel

Array Values

You can have several checkBoxs linked to the same array only by using v-model with a value of array.

  • [ "luis" ]
  • checkLuis
  • checkcarols
  • checksummer
  • checkLyon

Array Object values

Sometimes you need to link an object as a value when selecting a checkBox for it, you only have to put it as value in vs-value an object either literal or linked.

[]
checkQueensland
checkSouth Australia
checkNew South Wales

Change Icon

Sometimes we want to change the internal icon inside the checkbox. To do so, we have the property icon

TIP

Vuesax uses the Google Material Icons font library by default. For a list of all available icons, visit the official Material Icons pageopen in new window. Other icon libraries can be used by providing the class for the respective pack in the icon-pack property. ex. FA4 uses fa or fas, FA5 uses fas, far, or fal.

  • checkPrimary
  • smssms
  • closeCancel
  • attach_fileFile
  • format_boldBold
  • location_searchinglocation
  • camera_altCamera

API #

NameTypeParametersDescriptiondefault
v-modelString / boolean / arrayLink values.
colorStringprimary, success, danger, warning, dark, RGB, HEXColor options for checkBox.primary
vs-valueStringprimary, success, danger, warning, dark, RGB, HEXValue if different from a boolean.
iconStringMaterial IconsChange the checkBox icon.checked
icon-packStringIcon Pack Class NameIcon Pack to be used. If not set, icon will default to Material Icons. ex. FA4 uses fa or fas, FA5 uses fas, far, or fal.material-icons