Checkbox

A control that allows the user to toggle between checked and not checked.

Examples

Default

Accept terms and conditions

<script setup>
import { Checkbox } from '@empathyds/vue'
</script>

<div class="flex items-center space-x-2">
  <Checkbox id="terms" />
  <label
    for="terms"
    class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
  >
    Accept terms and conditions
  </label>
</div>

Props

Checkbox

Prop	Type	Default	Description
checked	boolean | 'indeterminate'	-	The controlled checked state of the checkbox.
defaultChecked	boolean | 'indeterminate'	-	The checked state of the checkbox when it is initially rendered.
disabled	boolean	false	When true, prevents the user from interacting with the checkbox.
required	boolean	false	When true, indicates that the user must check the checkbox before the owning form can be submitted.
name	string	-	The name of the checkbox. Submitted with its owning form as part of a name/value pair.
value	string	'on'	The value given as data when submitted with a name.
id	string	-	A unique identifier for the checkbox.

Events

Checkbox

Event	Payload	Description
update:checked	boolean	Event handler called when the checked state of the checkbox changes.