Vue Checkbox - Soft UI

Use our Vue checkbox to allow the user to select one or more items from a set. You can use a checkbox for:

Selecting one or more options from a list
Presenting a list containing sub-selections
Turning an item on/off in a desktop environment (If you have a single option, avoid using a checkbox and use an on/off switch instead)

See below our examples.

Default Checkbox

Use this example to create a simple and versatile checkbox.

Checkbox

<template>
 <soft-checkbox>Checkbox</soft-checkbox>
</template>

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

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

Props Information

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

Radio Button

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

Radio

Radio 2

Radio 3

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

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

1<template>
2 <soft-radio checked>Radio</soft-radio>
3</template>
4
5<script>
6import SoftRadio from "@/components/SoftRadio.vue";
7export default { components: { SoftRadio, }, };
8</script>

Props Information

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