Checkbox

Checkbox input with a label, description, and validation state.

template 1 required 6 optional 2 slots 1 a11y rule

Reference Guide

Preview

You agree to our terms of service.

Usage

views.py
python
from djust import LiveView


class MyView(LiveView):
    template_name = "my_template.html"

    def mount(self, request, **kwargs):
        self.name = 'gallery_checkbox'
        self.label = 'Accept terms'
        self.description = 'You agree to our terms of service.'
my_template.html
django
{% load theme_components %}
{% theme_checkbox name=name label=label description=description %}

Props

NameTypeRequiredDefaultDescription
namestrrequired——
labelstr——
descriptionOptional[str]——
css_prefixstr——
attrsdict——
slot_labelstr——
slot_descriptionstr——

Accessibility

RequirementElementAttributeValue
Label must reference checkbox via for attributelabelfor(present)

Slots

slot_label slot_description
Source & styles
FilePathNotes
templatedjust_theming/components/checkbox.htmlCopy it to the same path in your project, or per theme under djust_theming/themes/<theme>/components/.
cssdjust_theming/components.cssDefines 4 of this component's classes at line 326, 334, 347, 356. Override those rules, or the custom properties they read, in a stylesheet loaded after it.
CSS variables
--foreground --muted-foreground --primary --ring
Template source — checkbox.html
django
<div class="{{ css_prefix }}checkbox-group {% if attrs.class %}{{ attrs.class }}{% endif %}">
    <input
        type="checkbox"
        name="{{ name }}"
        id="{{ name }}"
        class="{{ css_prefix }}checkbox"
        {% if attrs.checked %}checked{% endif %}
        {% if attrs.required %}required{% endif %}
        {% if attrs.disabled %}disabled{% endif %}
        {% if attrs.value %}value="{{ attrs.value }}"{% endif %}
    />
    {% if slot_label %}
    {{ slot_label|safe }}
    {% elif label %}
    <label for="{{ name }}" class="{{ css_prefix }}checkbox-label">{{ label }}</label>
    {% endif %}
    {% if slot_description %}
    <div class="{{ css_prefix }}checkbox-description">{{ slot_description|safe }}</div>
    {% elif description %}
    <div class="{{ css_prefix }}checkbox-description">{{ description }}</div>
    {% endif %}
</div>