Preview

Installation

npx sigma-ui@latest add checkbox

Usage

<script setup lang="ts">
import { ref } from 'vue';
import { Checkbox } from '@/components/ui/checkbox';

const termsAccepted = ref<boolean | 'indeterminate'>(false);
</script>

<template>
  <Checkbox
    id="terms"
    v-model="termsAccepted"
    label="Accept terms and conditions"
  />
</template>

• Use v-model to control the checked state. It is true, false, or 'indeterminate'.
• label and description render a label and helper text next to the checkbox. Pass an id so the label is linked to the checkbox.

Examples

Basic

Custom label and description

Disabled

Form

Read the vee-validate docs to learn more about form validation.

API Reference

Checkbox

Props

Prop	Type	Default
label Text label rendered next to the checkbox.	string	-
description Secondary text rendered below the label.	string	-
id Id of the element	string	-
defaultValue The value of the checkbox when it is initially rendered. Use when you do not need to control its value.	boolean | "indeterminate"	-
modelValue The controlled value of the checkbox. Can be binded with v-model.	boolean | "indeterminate" | null	-
disabled When true, prevents the user from interacting with the checkbox	boolean	-
value The value given as data when submitted with a name.	AcceptableValue	"on"
trueValue The value used when the checkbox is checked. Defaults to true.	boolean	-
falseValue The value used when the checkbox is unchecked. Defaults to false.	boolean	-
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"
name The name of the field. Submitted with its owning form as part of a name/value pair.	string	-
required When true, indicates that the user must set the value before the owning form can be submitted.	boolean	-

Events

Event	Payload
update:modelValue Event handler called when the value of the checkbox changes.	[value: boolean | "indeterminate"]

Slots

Slot	Scope
default The content of the component.	-

Accessibility

Adheres to the tri-state Checkbox WAI-ARIA design pattern. Reka UI renders a button with role="checkbox" and aria-checked.

Key	Description
Tab	Moves focus to the checkbox.
Space	Checks or unchecks the checkbox.