Checkbox — Component Storybook

LIVE PREVIEW 2

checkbox(name=gallery_checkbox, label=Accept terms, description=You agree to our terms of service.)

checkbox(name=gallery_checkbox_plain, label=Subscribe to newsletter)

USAGE

template

{%{% endverbatim %} load theme_components {% verbatim %}%}

{%{% endverbatim %} theme_{{ name }}{% for p in required_context %} {{ p.name }}{% endfor %}{% for p in optional_context %} {{ p.name }}={{ p.default|default:"..." }}{% endfor %} {% verbatim %}%}

PROPS — REQUIRED 1

Name	Type	Default
`name`	`str`	—

PROPS — OPTIONAL 6

Name	Type	Default
`label`	`str`	—
`description`	`Optional[str]`	—
`css_prefix`	`str`	—
`attrs`	`dict`	—
`slot_label`	`str`	—
`slot_description`	`str`	—

ACCESSIBILITY 1

Requirement	Element	Attribute	Value
Label must reference checkbox via for attribute	`label`	`for`	(present)

AVAILABLE SLOTS 2

slot_label slot_description

TEMPLATE SOURCE

checkbox.html

<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>