Checkbox

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

Examples

Default

Accept terms and conditions 
<div class="flex flex-col gap-6">
  <div class="flex items-center gap-3">
    <c-checkbox id="demo-1"></c-checkbox>
    <c-label label-for="demo-1">Accept terms and conditions</c-label>
  </div>
</div>

With Label

Accept terms and conditions
Accept terms and conditions

By clicking this checkbox, you agree to the terms and conditions. 

<div class="flex flex-col gap-6">
  <div class="flex items-center gap-3">
    <c-checkbox id="checkbox-with-label"></c-checkbox>
    <c-label label-for="checkbox-with-label"
      >Accept terms and conditions</c-label
    >
  </div>
  <div class="flex items-start gap-3">
    <c-checkbox id="checkbox-with-description" checked></c-checkbox>
    <div class="grid gap-2">
      <c-label label-for="checkbox-with-description"
        >Accept terms and conditions</c-label
      >
      <p class="text-muted-foreground text-sm">
        By clicking this checkbox, you agree to the terms and conditions.
      </p>
    </div>
  </div>
</div>

Disabled

Enable notifications 
<div class="flex items-center gap-3">
  <c-checkbox id="checkbox-disabled" disabled></c-checkbox>
  <c-label label-for="checkbox-disabled">Enable notifications</c-label>
</div>

Indeterminate

Partially selected 
<div class="flex items-center gap-3">
  <c-checkbox id="checkbox-indeterminate" indeterminate></c-checkbox>
  <c-label label-for="checkbox-indeterminate">Partially selected</c-label>
</div>

API Reference

Checkbox

A checkbox component that allows users to toggle between checked and unchecked states.

Prop Type Default Description
checked boolean false Whether the checkbox is checked
disabled boolean false Whether the checkbox is disabled
indeterminate boolean false Whether the checkbox is in an indeterminate state
name string - The name attribute for the checkbox
value string - The value attribute for the checkbox
aria-label string - Accessible label for the checkbox
checkbox-classes string - Additional CSS classes to apply to the checkbox

Events

change

Fired when the checkbox state changes.

Detail:

  • checked (boolean) - The new checked state
  • indeterminate (boolean) - The new indeterminate state
checkbox.addEventListener('change', (event) => {
  console.log('Checked:', event.detail.checked);
  console.log('Indeterminate:', event.detail.indeterminate);
});