Radio
Preview
Usage
views.py
python
from djust import LiveView
class MyView(LiveView):
template_name = "my_template.html"
def mount(self, request, **kwargs):
self.options = [{'value': 'sm', 'label': 'Small'}, {'value': 'md', 'label': 'Medium'}, {'value': 'lg', 'label': 'Large'}]my_template.html
django
{% load theme_components %}
{% theme_radio name='gallery_radio' label='Choose a size' options=options selected='md' %}Props
| Name | Type | Required | Default |
|---|---|---|---|
| name | str | required | — |
| label | Optional[str] | — | |
| options | list | — | |
| selected | str | — | |
| css_prefix | str | — | |
| attrs | dict | — | |
| slot_label | str | — | |
| slot_options | str | — |
Accessibility
| Requirement | Element | Attribute | Value |
|---|---|---|---|
| Radio group must have role=radiogroup | fieldset | role | radiogroup |
Slots
slot_label slot_options
Source & styles
| File | Path | Notes |
|---|---|---|
| template | djust_theming/components/radio.html | Copy it to the same path in your project, or per theme under djust_theming/themes/<theme>/components/. |
| css | djust_theming/components.css | Defines 1 of this component's classes at line 1526. Override those rules, or the custom properties they read, in a stylesheet loaded after it. |
Template source — radio.html
django
<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>