Vue Checkbox - Argon

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

Checkbox

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

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

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

Props Information

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

Vue Radio - Argon

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

Radio

Radio 2

Radio 3

1<template>
2  <argon-radio checked>Radio</argon-radio>
3</template>
4
5<script>
6import ArgonRadio from "@/components/ArgonRadio.vue";
7export default {
8 components: {
9    ArgonRadio,
10  },
11 };
12</script>

<template>
  <argon-radio checked>Radio</argon-radio>
</template>

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

Props Information

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

Vue Switch - Argon

ArgonSwitch 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

1<template>
2 <argon-switch id="rememberMe" name="Remember Me">
3   Remember me
4 </argon-switch>
5</template>
6
7<script>
8import ArgonSwitch from "@/components/ArgonSwitch.vue";
9export default {
10components: {
11  ArgonSwitch,
12},
13};
14</script>

<template>
 <argon-switch id="rememberMe" name="Remember Me">
   Remember me
 </argon-switch>
</template>

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

Props Information

Name	Type	Description
id*	String	Used to set the `id` of `ArgonSwitch`. It is a required prop.
name*	String	Used to set the `name` of `ArgonSwitch`. It is a required prop.
checked	bool	Used to set the `checked` state of `ArgonSwitch`.
labelClass	String	Used to add custom class around `label` element.
inputClass	String	Used to add custom class around `input` element.