Labeldescription*

Helper text

Usage

<script setup lang="ts">
import { Checkbox } from "wedges-vue";
</script>

<template>
  <Checkbox id="terms" />
</template>

For more advanced usage you can use Checkbox.Root component to customize the appearance of the checkbox.

API Reference

Checkbox component extends Radix Checkbox primitive and supports all of its props.

Props

Prop	Type	Default
as	AsTag | Component	'div'
asChild	boolean	false
checked	boolean | 'indeterminate'
defaultChecked	boolean	false
description	string
disabled	boolean	false
helperText	string
id	string
label	string
name	string
required	boolean	false
tooltip	string
value	string

Emit	Description
update:checked

Accessibility

The Checkbox component supports all accessibility features of the Radix Checkbox primitive.

Examples

Required*

Label(optional)

Helper text

Label

Indeterminate

Disabled

The following example shows a customized Checkbox component:

Share to 3 users

WDG