Checkbox

Checkboxes allow the user to select one or more items from a set.

Basic Usage

You can also add a label to the checkbox by using the label attribute.

Value: false

Checkbox Label

<template>
  <SprCheckbox v-model="checkbox" label="Checkbox Label" />
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const checkbox = ref(false);
</script>

Adding Description

You can add a description to the checkbox by using the description attribute.

Checkbox LabelLorem ipsum dolor sit amet, consectetur adipiscing elit.

<template>
  <SprCheckbox
    v-model="checkbox"
    label="Checkbox Label"
    description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const checkbox = ref(false);
</script>

Checked

Checkboxes can be set to checked by the use of v-model or checked props.

Using v-model:

Checkbox Label

<template>
  <SprCheckbox v-model="checkbox" label="Checkbox Label" />
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const checkbox = ref(true);
</script>

Using checked props:

Checkbox Label

<template>
  <SprCheckbox label="Checkbox Label" checked />
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const checkbox = ref(true);
</script>

Disabled

Add disabled attribute to make the checkbox disabled.

Checkbox Label

<template>
  <SprCheckbox v-model="checkbox" label="Checkbox Label" disabled />
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const checkbox = ref(true);
</script>

Indeterminate

Add indeterminate attribute to make the icon of the checkbox a minus sign.

Checkbox Label

Checkbox Label

<template>
  <SprCheckbox v-model="checkbox" label="Checkbox Label" indeterminate />
  <SprCheckbox v-model="checkbox2" label="Checkbox Label" indeterminate disabled/>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const checkbox = ref(true);
const checkbox2 = ref(true);
</script>

API Reference

Name	Description	Type	Default
id	ID of the `checkbox` element	string	-
label	Label of a checkbox	string	-
description	Description of a checkbox. Located at the bottom of label.	string	-
disabled	if `true`, the component is disabled	boolean	false
indeterminate	if `true`, the component icon for checked state becomes `-`	boolean	false
bordered	Add border to the component	Boolean	false
fullWidth	Defines if component is fit-content or full width	Boolean	false