Checkbox

The checkbox component is a lightweight extension of the standard HTML input type="checkbox" element, featuring: themes, sizes, etc.

• API
  • Props
  • Events
• Basic Checkbox
• Themes
  • Solid
  • Outlined
  • Switch
• Sizes
  • Checkbox
  • Switch
• States
  • Disabled

API

Props

Name	Type	Default	Description
theme	String	'solid'	Defines the theme applied to the Checkbox. Possible values are: solid, outlined, text and text-solid
variant	String	'default'	Defines the variant of the theme applied to the Checkbox. Possible values are: default, primary, secondary, danger, warning, success and info
size	String	'md'	Defines the size of the Checkbox. Possible values are: sm, md, lg
label	String	''	Defines the text to show inside the Checkbox
disabled	Boolean	false	Defines if the checkbox should be disabled or not
model-value	Boolean	false	Defines the status of the Checkbox (checked or unchecked)

Events

Name	Description
update:model-value	Event emitted whenever the checkbox is checked or unchecked

Basic Checkbox

Default

<template>
	<Checkbox v-model="value" variant="default" label="Default" />
</template>

Themes

Every checkbox can define a theme and a variant. The theme defines the design of the checkbox and the variant defines the colors applied to the theme.

Solid

Default Primary Secondary Danger Warning Success Info

Outlined

Default Primary Secondary Danger Warning Success Info

Switch

Default Primary Secondary Danger Warning Success Info

<template>
	<!-- Solid -->
	<Checkbox v-model="value" variant="default" label="Default" />
	<Checkbox v-model="value" variant="primary" label="Primary" />
	<Checkbox v-model="value" variant="secondary" label="Secondary" />
	<Checkbox v-model="value" variant="danger" label="Danger" />
	<Checkbox v-model="value" variant="warning" label="Warning" />
	<Checkbox v-model="value" variant="success" label="Success" />
	<Checkbox v-model="value" variant="info" label="Info" />

	<!-- Outlined -->
	<Checkbox v-model="value" theme="outlined" variant="default" label="Default" />
	<Checkbox v-model="value" theme="outlined" variant="primary" label="Primary" />
	<Checkbox v-model="value" theme="outlined" variant="secondary" label="Secondary" />
	<Checkbox v-model="value" theme="outlined" variant="danger" label="Danger" />
	<Checkbox v-model="value" theme="outlined" variant="warning" label="Warning" />
	<Checkbox v-model="value" theme="outlined" variant="success" label="Success" />
	<Checkbox v-model="value" theme="outlined" variant="info" label="Info" />

	<!-- Switch -->
	<Checkbox v-model="value" theme="switch" variant="default" label="Default" />
	<Checkbox v-model="value" theme="switch" variant="primary" label="Primary" />
	<Checkbox v-model="value" theme="switch" variant="secondary" label="Secondary" />
	<Checkbox v-model="value" theme="switch" variant="danger" label="Danger" />
	<Checkbox v-model="value" theme="switch" variant="warning" label="Warning" />
	<Checkbox v-model="value" theme="switch" variant="success" label="Success" />
	<Checkbox v-model="value" theme="switch" variant="info" label="Info" />
</template>

Sizes

Checkbox

Small checkbox Medium checkbox Large checkbox

Switch

Small switch Medium switch Large switch

<template>
	<!-- Solid -->
	<Checkbox v-model="value" size="sm" label="Small checkbox" />
	<Checkbox v-model="value" size="md" label="Medium checkbox" />
	<Checkbox v-model="value" size="lg" label="Large checkbox" />

	<!-- Switch -->
	<Checkbox v-model="value" theme="switch" size="sm" label="Small switch" />
	<Checkbox v-model="value" theme="switch" size="md" label="Medium switch" />
	<Checkbox v-model="value" theme="switch" size="lg" label="Large switch" />
</template>

States

Besides themes and sizes, every checkbox can define a set of props to control their visible states.

Disabled

Default Primary Secondary Danger Warning Success Info

Default Primary Secondary Danger Warning Success Info

Default Primary Secondary Danger Warning Success Info

<template>
	<!-- Solid -->
	<Checkbox v-model="value" variant="default" label="Default" disabled />
	<Checkbox v-model="value" variant="primary" label="Primary" disabled />
	<Checkbox v-model="value" variant="secondary" label="Secondary" disabled />
	<Checkbox v-model="value" variant="danger" label="Danger" disabled />
	<Checkbox v-model="value" variant="warning" label="Warning" disabled />
	<Checkbox v-model="value" variant="success" label="Success" disabled />
	<Checkbox v-model="value" variant="info" label="Info" disabled />

	<!-- Outlined -->
	<Checkbox v-model="value" theme="outlined" variant="default" label="Default" disabled />
	<Checkbox v-model="value" theme="outlined" variant="primary" label="Primary" disabled />
	<Checkbox v-model="value" theme="outlined" variant="secondary" label="Secondary" disabled />
	<Checkbox v-model="value" theme="outlined" variant="danger" label="Danger" disabled />
	<Checkbox v-model="value" theme="outlined" variant="warning" label="Warning" disabled />
	<Checkbox v-model="value" theme="outlined" variant="success" label="Success" disabled />
	<Checkbox v-model="value" theme="outlined" variant="info" label="Info" disabled />

	<!-- Switch -->
	<Checkbox v-model="value" theme="switch" variant="default" label="Default" disabled />
	<Checkbox v-model="value" theme="switch" variant="primary" label="Primary" disabled />
	<Checkbox v-model="value" theme="switch" variant="secondary" label="Secondary" disabled />
	<Checkbox v-model="value" theme="switch" variant="danger" label="Danger" disabled />
	<Checkbox v-model="value" theme="switch" variant="warning" label="Warning" disabled />
	<Checkbox v-model="value" theme="switch" variant="success" label="Success" disabled />
	<Checkbox v-model="value" theme="switch" variant="info" label="Info" disabled />
</template>