UCI

Radio group: Disabled 

<div class="radio-group" id="radio-group">
    <ul>
        <li class="radio-group__item">
            <div class="radio disabled">
                <input class="radio-input" id="radio1" type="radio" title="Radio1" name="Radio" value="Radio1" disabled>
                <label class="radio-label " for="radio1" id="" value="">
                    <span class="caption-placeholder-m">Radio1</span>
                </label>
            </div>
        </li>
        <li class="radio-group__item">
            <div class="radio disabled">
                <input class="radio-input" id="radio2" type="radio" title="Radio2" name="Radio" value="Radio2" disabled>
                <label class="radio-label " for="radio2" id="" value="">
                    <span class="caption-placeholder-m">Radio2</span>
                </label>
            </div>
        </li>
        <li class="radio-group__item">
            <div class="radio disabled">
                <input class="radio-input" id="radio3" type="radio" title="Radio3" name="Radio" value="Radio3" disabled>
                <label class="radio-label " for="radio3" id="" value="">
                    <span class="caption-placeholder-m">Radio3</span>
                </label>
            </div>
        </li>
        <li class="radio-group__item">
            <div class="radio disabled">
                <input class="radio-input" id="radio4" type="radio" title="Radio4" name="Radio" value="Radio4" disabled>
                <label class="radio-label " for="radio4" id="" value="">
                    <span class="caption-placeholder-m">Radio4</span>
                </label>
            </div>
        </li>
    </ul>
</div>
 
<div class="radio-group" id="{{id}}">
    <ul{{#if isColumn}} class="column"{{/if}}>
        {{#each this.radio-group}}
        <li class="radio-group__item">
            {{> @radio this }}
        </li>
        {{/each}}
    </ul>
</div>
 
{
  "id": "radio-group",
  "radio-group": [
    {
      "id": "radio1",
      "title": "Radio1",
      "name": "Radio",
      "disabled": true,
      "label": {
        "text": "Radio1",
        "type": "-placeholder-m"
      }
    },
    {
      "id": "radio2",
      "title": "Radio2",
      "name": "Radio",
      "disabled": true,
      "label": {
        "text": "Radio2",
        "type": "-placeholder-m"
      }
    },
    {
      "id": "radio3",
      "title": "Radio3",
      "name": "Radio",
      "disabled": true,
      "label": {
        "text": "Radio3",
        "type": "-placeholder-m"
      }
    },
    {
      "id": "radio4",
      "title": "Radio4",
      "name": "Radio",
      "disabled": true,
      "label": {
        "text": "Radio4",
        "type": "-placeholder-m"
      }
    }
  ]
}
  • Content: 
    .radio-group {
    ul {
        display: flex;
    
        .radio-group__item {
            margin-right: 32px;
    
            &:last-child {
                margin-right: 0;
            }
        }
        &.column{flex-direction: column;
            .radio-group__item {
                margin-right: 0;
                margin-bottom: 15px;
    
                &:last-child {
                    margin-bottom: 0;
                }
            }
        }
    }
}
  • URL: /components/raw/radio-group/radio-group.css
  • Filesystem Path: src/02-molecules/radio-group/radio-group.css
  • Size: 470 Bytes

No notes defined.