Vebego Component Library

Radiobutton: 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>
 
<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>
 
{
  "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"
  }
}
  • Content: 
    .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;
            }
        }
    }
}
  • URL: /components/raw/radiobutton/radiobutton.css
  • Filesystem Path: src\components\02-atoms\forms\radiobutton\radiobutton.css
  • Size: 364 Bytes

No notes defined.