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

<template>
  <material-checkbox id="checkboxId">Checkbox</material-checkbox>
</template>

<script>
import MaterialCheckbox from "@/components/MaterialCheckbox.vue";
export default { components: { MaterialCheckbox }, };
</script>

1<template>
2  <material-checkbox id="checkboxId">Checkbox</material-checkbox>
3</template>
4
5<script>
6import MaterialCheckbox from "@/components/MaterialCheckbox.vue";
7export default { components: { MaterialCheckbox }, };
8</script>

Props Information

Name	Type	Description
id	String	Used to set the `id` of `MaterialCheckbox`.
name	String	Used to set the `name` of `MaterialCheckbox`.
checked	bool	Used to set the `checked` state of `MaterialCheckbox`.

Vue Radio - Material

Radio buttons are used for selecting one option from many. You can Create consistent cross-browser and cross-device checkboxes with our MaterialRadio component.

Radio

Radio 2

Radio 3

<template>
  <material-radio id="radio" name="radio" checked>Radio</material-radio>
  <material-radio id="radio2" name="radio">Radio 2</material-radio>
  <material-radio id="radio3" name="radio">Radio 3</material-radio>
</template>

<script>
import MaterialRadio from "@/components/MaterialRadio.vue";
export default { components: { MaterialRadio }, };
</script>

1<template>
2  <material-radio id="radio" name="radio" checked>Radio</material-radio>
3  <material-radio id="radio2" name="radio">Radio 2</material-radio>
4  <material-radio id="radio3" name="radio">Radio 3</material-radio>
5</template>
6
7<script>
8import MaterialRadio from "@/components/MaterialRadio.vue";
9export default { components: { MaterialRadio }, };
10</script>

Props Information

Name	Type	Description
id*	String	Used to set the `id` of `MaterialRadio`. It is a required prop.
name*	String	Used to set the `name` of `MaterialRadio`. It is a required prop.
checked	bool	Used to set the `checked` state of `MaterialRadio`.

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.

Toggle this switch element

<template>
 <material-switch id="toggle" name="Toggle">
 Toggle this switch element
 </material-switch>
</template>

<script>
import MaterialSwitch from "@/components/MaterialSwitch.vue";
export default { components: { MaterialSwitch }, };
</script>

1<template>
2 <material-switch id="toggle" name="Toggle">
3 Toggle this switch element
4 </material-switch>
5</template>
6
7<script>
8import MaterialSwitch from "@/components/MaterialSwitch.vue";
9export default { components: { MaterialSwitch }, };
10</script>

Props Information

Name	Type	Description
id*	String	Used to set the `id` of `MaterialSwitch`. It is a required prop.
name*	String	Used to set the `name` 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.