Checkbox Components

Basic Checkboxes

Checkboxes allow users to select one or more items from a set. They can be used for binary choices or for selecting multiple options.

Default (unchecked)
checked
disabled
disabled checked

Checkboxes with Help Text

Checkboxes can include additional help text to provide more context or instructions to the user.

help_text="..."
required help_text="..."

Checkbox Color Variants

Checkboxes can be styled with different color themes to match your design system.

Default (primary)
color="secondary"
color="tertiary"

Usage

<!-- Basic checkbox -->
<c-forms.checkbox id="my-checkbox">Checkbox label</c-forms.checkbox>

<!-- Checked checkbox -->
<c-forms.checkbox id="checked-checkbox" checked>Checked option</c-forms.checkbox>

<!-- Disabled checkbox -->
<c-forms.checkbox id="disabled-checkbox" disabled>Disabled option</c-forms.checkbox>

<!-- Disabled and checked checkbox -->
<c-forms.checkbox id="disabled-checked" disabled checked>Disabled checked</c-forms.checkbox>

<!-- With help text -->
<c-forms.checkbox id="help-checkbox" help_text="Additional information about this option">
  With help text
</c-forms.checkbox>

<!-- Required checkbox -->
<c-forms.checkbox id="required-checkbox" required>Required option</c-forms.checkbox>

<!-- With color variants -->
<c-forms.checkbox id="secondary-checkbox" color="secondary">Secondary color</c-forms.checkbox>
<c-forms.checkbox id="tertiary-checkbox" color="tertiary">Tertiary color</c-forms.checkbox>

<!-- With name and value for form submission -->
<c-forms.checkbox id="consent" name="consent" value="yes">I agree to terms</c-forms.checkbox>

Attributes

Attribute
Type
Default
Description
id string none ID for the checkbox input element (recommended for accessibility)
name string none Name attribute for the checkbox input, used for form submission
value string none Value attribute for the checkbox input, submitted when checked
checked boolean false When true, the checkbox is in a checked state
disabled boolean false When true, the checkbox is disabled and non-interactive
required boolean false When true, the checkbox is required to be checked
help_text string none Explanatory text displayed below the checkbox label
color string "primary" Color theme for the checkbox. Options: "primary", "secondary", "tertiary"