Checkbox

Usage

<script lang="ts">
  import { Checkbox, CheckboxField } from '$lib/components/checkbox';
  import { Label } from '$lib/components/fieldset';
 
  let acceptTerms = false;
</script>

<CheckboxField>
  <Checkbox id="terms" bind:checked={acceptTerms} />
  <Label for="terms">Accept Terms and Conditions</Label>
</CheckboxField>

Properties

The Checkbox component extends the Bits UI <Checkbox> component. Find the full list of available properties in the official Bits UI documentation.

Checkbox

Examples

Group

Use the CheckboxGroup component to organize multiple checkboxes in a stack with consistent spacing.

Indeterminate

Use the indeterminate state to indicate that some, but not all, of the checkboxes in a group are selected.

Description

Use the Description component to provide additional information and helpful context about the checkbox.

Sublabel

Use the Sublabel component to add a secondary label to the checkbox.

Reversed

Place the Checkbox last in the CheckboxField component to make the checkbox appear on the right side of the label.

Error

Use the error property to indicate that the checkbox has an error.

Disabled

Use the disabled property to prevent users from interacting with the checkbox.