Checkbox
Implemented InputSingle checkbox and indeterminate state.
Kumo reference: kumo-ui.com/components/checkbox/
Presentation commands show demo feedback. Read the interaction guide to connect real actions.
Basic
Show template
{% load wdj %}
{% include "wdj/components/checkbox.html" with name="check_basic" label="Accept terms and conditions" only %}Checked
Show template
{% load wdj %}
{% include "wdj/components/checkbox.html" with name="check_checked" label="Notifications" checked=True only %}Indeterminate
Show template
{% load wdj %}
{% include "wdj/components/checkbox.html" with name="check_indeterminate" label="Select all" indeterminate=True only %}Disabled
Show template
{% load wdj %}
{% include "wdj/components/checkbox.html" with name="check_disabled" label="Unavailable" disabled=True only %}Disabled checked
Show template
{% load wdj %}
{% include "wdj/components/checkbox.html" with name="check_disabled_checked" label="Managed setting" disabled=True checked=True only %}Description
Show template
{% load wdj %}
{% include "wdj/components/checkbox.html" with name="check_description" label="Analytics" description="Collect anonymous usage statistics." only %}Required
Show template
{% load wdj %}
{% include "wdj/components/checkbox.html" with name="check_required" label="Accept terms" required=True only %}Error
You must accept the terms.
Show template
{% load wdj %}
{% include "wdj/components/checkbox.html" with name="check_error" label="Accept terms" error="You must accept the terms." only %}Group
Show template
{% load wdj %}
<fieldset class="grid gap-3"><legend class="mb-2 text-base font-medium">Notifications</legend>{% include "wdj/components/checkbox.html" with name="check_email" label="Email" checked=True only %}{% include "wdj/components/checkbox.html" with name="check_sms" label="SMS" only %}</fieldset>Surface
Show template
{% load wdj %}
{% wdj_component "wdj/components/card.html" %}
{% include "wdj/components/checkbox.html" with name="check_card" label="Enable automatic updates" description="Install updates when available." only %}
{% endwdj_component %}Label first
Show template
{% load wdj %}
{% include "wdj/components/checkbox.html" with name="check_label_first" label="Remember me" control_first=False only %}Error variant
Show template
{% load wdj %}
{% include "wdj/components/checkbox.html" with name="check_variant_error" label="Invalid option" variant="error" only %}Group with error
Show template
{% load wdj %}
{% include "wdj/components/choice_group.html" with legend="Notifications" name="audit-checkbox-group-with-error" items=audit_choices error="Choose a notification method." only %}Card choices
Show template
{% load wdj %}
{% include "wdj/components/choice_group.html" with legend="Notifications" name="audit-checkbox-card-choices" items=audit_choices appearance="card" only %}Horizontal card choices
Show template
{% load wdj %}
{% include "wdj/components/choice_group.html" with legend="Notifications" name="audit-checkbox-horizontal-card-choices" items=audit_choices appearance="card" orientation="horizontal" only %}Styled legend
Show template
{% load wdj %}
{% include "wdj/components/choice_group.html" with legend="Notifications" name="audit-checkbox-styled-legend" items=audit_choices class="rounded-lg bg-kumo-recessed p-4" only %}Custom group legend
Show template
{% load wdj %}
{% include "wdj/components/choice_group.html" with items=audit_choices name="audit-custom-checkbox-legend" legend="Notification preferences" legend_class="text-lg" only %}API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| name | string | unset | Name; pass the documented value shown in the examples. |
| value | string | unset | Value; pass the documented value shown in the examples. |
| label | string | unset | Visible accessible label. Supply an explicit aria-label via attrs when the control is bare. |
| description | string | unset | Description; pass the documented value shown in the examples. |
| checked | bool | False | Checked; pass the documented value shown in the examples. |
| indeterminate | bool | False | Indeterminate; pass the documented value shown in the examples. |
| required | bool | False | Required; pass the documented value shown in the examples. |
| disabled | bool | False | Disabled; pass the documented value shown in the examples. |
| error | string | unset | Validation message; implies error styling and accessible error association. |
| variant | string | component-specific | Variant; pass the documented value shown in the examples. |
| appearance | string | unset | Checkbox: card or default. Radio: default/card/segmented. Badge: filled/dot. |
| control_first | string | unset | Control first; pass the documented value shown in the examples. |
| id | string | unset | Stable unique DOM ID; important for HTMX targets and focus restoration. |
| attrs | dict | {} | Dictionary of escaped native, HTMX or Alpine attributes. Literal Tailwind classes only. |
| class | string | "" | Class; pass the documented value shown in the examples. |