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.

  • check Primary - active
  • check Primary - inactive
  • check Primary - active - disabled
  • check Primary - inactive - disabled

Colors

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

WARNING

Only RGB and HEX colors are supported.

  • check Primary
  • check Success
  • check Danger
  • check Warning
  • check Dark
  • check Color RGB
  • check Color 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.

  • check true
  • check false

String Value

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

  • null
  • check luis daniel

Array Values

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

  • [ "luis" ]
  • check Luis
  • check carols
  • check summer
  • check Lyon

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.

[]
check Queensland
check South Australia
check New 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 page. 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.

  • check Primary
  • sms sms
  • close Cancel
  • attach_file File
  • format_bold Bold
  • location_searching location
  • camera_alt Camera

API #

Name Type Parameters Description default
v-model String / boolean / array Link values.
color String primary, success, danger, warning, dark, RGB, HEX Color options for checkBox. primary
vs-value String primary, success, danger, warning, dark, RGB, HEX Value if different from a boolean.
icon String Material Icons Change the checkBox icon. checked
icon-pack String Icon Pack Class Name Icon 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