<!-- Default -->
<div class="atm-form-radiobutton ">
<input type="radio" class="form-radiobutton" id="radiobutton" name="radiobutton">
<label class="atm-form-label form-label " for="radiobutton">Morbi efficitur sit amet diam ut feugiat. Nam a imperdiet nisl. Etiam commodo sem at ullamcorper facilisis. Morbi efficitur sit amet diam ut feugiat. Nam a imperdiet nisl. Etiam commodo sem at ullamcorper facilisis.</label>
</div>
<!-- Checked -->
<div class="atm-form-radiobutton ">
<input type="radio" class="form-radiobutton" id="radiobutton-checked" name="radiobutton-checked" checked>
<label class="atm-form-label form-label " for="radiobutton-checked">Morbi efficitur sit amet diam ut feugiat. Nam a imperdiet nisl. Etiam commodo sem at ullamcorper facilisis. Morbi efficitur sit amet diam ut feugiat. Nam a imperdiet nisl. Etiam commodo sem at ullamcorper facilisis.</label>
</div>
<!-- Disabled -->
<div class="atm-form-radiobutton ">
<input type="radio" class="form-radiobutton" id="radiobutton-disabled" name="radiobutton-disabled" disabled>
<label class="atm-form-label form-label " for="radiobutton-disabled">Morbi efficitur sit amet diam ut feugiat. Nam a imperdiet nisl. Etiam commodo sem at ullamcorper facilisis. Morbi efficitur sit amet diam ut feugiat. Nam a imperdiet nisl. Etiam commodo sem at ullamcorper facilisis.</label>
</div>
<!-- Checked Disabled -->
<div class="atm-form-radiobutton ">
<input type="radio" class="form-radiobutton" id="radiobutton-checked-disabled" name="radiobutton-checked-disabled" checked disabled>
<label class="atm-form-label form-label " for="radiobutton-checked-disabled">Morbi efficitur sit amet diam ut feugiat. Nam a imperdiet nisl. Etiam commodo sem at ullamcorper facilisis. Morbi efficitur sit amet diam ut feugiat. Nam a imperdiet nisl. Etiam commodo sem at ullamcorper facilisis.</label>
</div>
<div class="atm-form-radiobutton {{modifier}}">
<input
type="radio"
class="form-radiobutton"
{{#if id}}id="{{id}}"{{/if}}
{{#if name}}name="{{name}}"{{/if}}
{{#if value}}value="{{value}}"{{/if}}
{{#if checked}}checked{{/if}}
{{#if disabled}}disabled{{/if}}>
{{render '@label' label merge=true}}
</div>
/* Default */
{
"modifier": "",
"id": "radiobutton",
"name": "radiobutton",
"value": "",
"checked": false,
"disabled": false,
"label": {
"text": "Morbi efficitur sit amet diam ut feugiat. Nam a imperdiet nisl. Etiam commodo sem at ullamcorper facilisis. Morbi efficitur sit amet diam ut feugiat. Nam a imperdiet nisl. Etiam commodo sem at ullamcorper facilisis.",
"for": "radiobutton"
}
}
/* Checked */
{
"modifier": "",
"id": "radiobutton-checked",
"name": "radiobutton-checked",
"value": "",
"checked": true,
"disabled": false,
"label": {
"text": "Morbi efficitur sit amet diam ut feugiat. Nam a imperdiet nisl. Etiam commodo sem at ullamcorper facilisis. Morbi efficitur sit amet diam ut feugiat. Nam a imperdiet nisl. Etiam commodo sem at ullamcorper facilisis.",
"for": "radiobutton-checked"
}
}
/* Disabled */
{
"modifier": "",
"id": "radiobutton-disabled",
"name": "radiobutton-disabled",
"value": "",
"checked": false,
"disabled": true,
"label": {
"text": "Morbi efficitur sit amet diam ut feugiat. Nam a imperdiet nisl. Etiam commodo sem at ullamcorper facilisis. Morbi efficitur sit amet diam ut feugiat. Nam a imperdiet nisl. Etiam commodo sem at ullamcorper facilisis.",
"for": "radiobutton-disabled"
}
}
/* Checked Disabled */
{
"modifier": "",
"id": "radiobutton-checked-disabled",
"name": "radiobutton-checked-disabled",
"value": "",
"checked": true,
"disabled": true,
"label": {
"text": "Morbi efficitur sit amet diam ut feugiat. Nam a imperdiet nisl. Etiam commodo sem at ullamcorper facilisis. Morbi efficitur sit amet diam ut feugiat. Nam a imperdiet nisl. Etiam commodo sem at ullamcorper facilisis.",
"for": "radiobutton-checked-disabled"
}
}
.atm-form-radiobutton {
@apply relative;
@apply pl-6;
.form-radiobutton {
@apply absolute left-0;
top: 2px;
@apply text-cta;
&[disabled] {
@apply bg-shade;
@apply text-shade;
+ .atm-form-label {
@apply text-shade;
}
}
}
}
No notes defined.