Vue Checkbox - Material

Checkboxes are for selecting one or several options in a list. You can Create consistent cross-browser and cross-device checkboxes with our MaterialCheckbox component.

Checkbox

I agree theTerms and Conditions

<script setup>
// Vue Material Kit 2 component
import MaterialCheckbox from "@/components/MaterialCheckbox.vue";
</script>
<template>
 <MaterialCheckbox id="terms" checked>
  I agree the
  <a href="javascript:;" class="text-dark font-weight-bolder">
  Terms and Conditions</a>
 </MaterialCheckbox>
</template>

1<script setup>
2// Vue Material Kit 2 component
3import MaterialCheckbox from "@/components/MaterialCheckbox.vue";
4</script>
5<template>
6 <MaterialCheckbox id="terms" checked>
7  I agree the
8  <a href="javascript:;" class="text-dark font-weight-bolder">
9  Terms and Conditions</a>
10 </MaterialCheckbox>
11</template>

Props Information

Name	Type	Default	Description
id	String		Used to set the `id` of `MaterialCheckbox`.
color	String	dark	Used to set the background color of `MaterialCheckbox`.
inputClass	String	dark	Used to apply class to the input of the `MaterialCheckbox`.
labelClass	String	dark	Used to apply class to the label of the `MaterialCheckbox`.
checked	bool		Used to set the `checked` state of `MaterialCheckbox`.
slot	node		The `MaterialCheckbox` has a default slot that receives node inside the label.

Vue Switch - Material

MaterialSwitch is a simple component used for activating one of two predefined options. Commonly used as an on/off button. It's mostly used in a number of various forms since they are very simple to use and cut the time one needs to fill all the inputs.

Remember meBe sure that you will always be logged in.

<script setup>
// Vue Material Kit 2 component
import MaterialSwitch from "@/components/MaterialSwitch.vue";
</script>
<template>
 <MaterialSwitch
  class="mb-0"
  id="flexSwitchCheckDefault1"
  labelClass="text-dark font-weight-bold d-block text-sm">
  Remember me
  <template #description>
    <span class="ms-1 text-xs d-block">
    Be sure that you will always be logged in.</span>
  </template>
 </MaterialSwitch>
</template>

1<script setup>
2// Vue Material Kit 2 component
3import MaterialSwitch from "@/components/MaterialSwitch.vue";
4</script>
5<template>
6 <MaterialSwitch
7  class="mb-0"
8  id="flexSwitchCheckDefault1"
9  labelClass="text-dark font-weight-bold d-block text-sm">
10  Remember me
11  <template #description>
12    <span class="ms-1 text-xs d-block">
13    Be sure that you will always be logged in.</span>
14  </template>
15 </MaterialSwitch>
16</template>

Props Information

Name	Type	Description
id*	String	Used to set the `id` of `MaterialSwitch`. It is a required prop.
checked	bool	Used to set the `checked` state of `MaterialSwitch`.
labelClass	String	Used to add custom class around `label` element.
slot	node	The `MaterialSwitch` has two slots. One default slot that receives node inside the label and another named `description` slot that receives node outside the label.