Radio — Component Storybook

LIVE PREVIEW 1

radio(name=gallery_radio, label=Choose a size, options=[{'value': 'sm', 'label': 'Small'}, {'value': 'md', 'label': 'Medium'}, {'value': 'lg', 'label': 'Large'}], selected=md)

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 7

Name	Type	Default
`label`	`Optional[str]`	—
`options`	`list`	—
`selected`	`str`	—
`css_prefix`	`str`	—
`attrs`	`dict`	—
`slot_label`	`str`	—
`slot_options`	`str`	—

ACCESSIBILITY 1

Requirement	Element	Attribute	Value
Radio group must have role=radiogroup	`fieldset`	`role`	radiogroup

AVAILABLE SLOTS 2

slot_label slot_options

TEMPLATE SOURCE

radio.html

<fieldset class="{{ css_prefix }}radio-group {% if attrs.class %}{{ attrs.class }}{% endif %}" role="radiogroup">
    {% if slot_label %}
    {{ slot_label|safe }}
    {% elif label %}
    <legend class="{{ css_prefix }}radio-legend">{{ label }}</legend>
    {% endif %}
    {% if slot_options %}
    {{ slot_options|safe }}
    {% else %}
    {% for opt in options %}
    <div class="{{ css_prefix }}radio-option">
        <input
            type="radio"
            name="{{ name }}"
            id="{{ name }}_{{ opt.value }}"
            value="{{ opt.value }}"
            class="{{ css_prefix }}radio"
            {% if opt.value == selected %}checked{% endif %}
            {% if attrs.required %}required{% endif %}
            {% if attrs.disabled %}disabled{% endif %}
        />
        <label for="{{ name }}_{{ opt.value }}" class="{{ css_prefix }}radio-label">{{ opt.label }}</label>
    </div>
    {% endfor %}
    {% endif %}
</fieldset>