<ul class="kx-select-group">
<li class="kx-select-item">
<label class="kx-selector kx-selector__radio">
<input type="radio"name="radio" />
<div class="kx-selector__indicator"></div>
</label>
</li>
<li class="kx-select-item">
<label class="kx-selector kx-selector__radio">
<input type="radio"name="radio" />
<div class="kx-selector__indicator"></div>
<span class="label-text">Default radio button</span>
</label>
</li>
<li class="kx-select-item">
<label class="kx-selector kx-selector__radio">
<input type="radio"name="radio"checked="checked" />
<div class="kx-selector__indicator"></div>
<span class="label-text">Selected radio button</span>
</label>
</li>
<li class="kx-select-item">
<label class="kx-selector kx-selector__radio">
<input type="radio"name="radio"disabled="disabled" />
<div class="kx-selector__indicator"></div>
<span class="label-text">Disabled radio button</span>
</label>
</li>
<li class="kx-select-item">
<label class="kx-selector kx-selector__radio">
<input type="radio"name="radio"checked="checked"disabled="disabled" />
<div class="kx-selector__indicator"></div>
<span class="label-text">Disabled selected radio button</span>
</label>
</li>
</ul>
{% if not rows %}
<label class="kx-selector kx-selector__radio">
<input type="radio"{% if name -%} name="{{name}}"{% endif %}{% if checked -%} checked="checked"{% endif %}{% if disabled -%} disabled="disabled"{% endif %} />
<div class="kx-selector__indicator"></div>
{% if label -%}<span class="label-text">{{ label }}</span>{% endif %}
</label>
{% else%}
<ul class="kx-select-group">
{% for row in rows -%}
<li class="kx-select-item">
<label class="kx-selector kx-selector__radio">
<input type="radio"{% if row.name -%} name="{{row.name}}"{% endif %}{% if row.checked -%} checked="checked"{% endif %}{% if row.disabled -%} disabled="disabled"{% endif %} />
<div class="kx-selector__indicator"></div>
{% if row.label -%}<span class="label-text">{{ row.label }}</span>{% endif %}
</label>
</li>
{% endfor -%}
</ul>
{% endif %}
{
"type": "radio",
"name": "Radio button",
"label": "Radio Button",
"checked": null,
"disabled": null,
"rows": [
{
"checked": null,
"disabled": null,
"name": "radio"
},
{
"label": "Default radio button",
"checked": null,
"disabled": null,
"name": "radio"
},
{
"label": "Selected radio button",
"checked": true,
"disabled": null,
"name": "radio"
},
{
"label": "Disabled radio button",
"checked": null,
"disabled": true,
"name": "radio"
},
{
"label": "Disabled selected radio button",
"checked": true,
"disabled": true,
"name": "radio"
}
]
}
- Handle: @radio
- Preview:
- Filesystem Path: src\components\form\radio\radio.njk
There are no notes for this item.