Swegon Component Library

Radio: Default 

<fieldset class="form-item">
    <legend class="form-item__legend" id="">Radio buttons</legend>

    <label for="radio-1" class="radio__label">
        <input id="radio-1" type="radio" name="radios" class="radio__input">
        <span>Radio button 1</span>
    </label>
    <label for="radio-2" class="radio__label">
        <input id="radio-2" type="radio" name="radios" class="radio__input">
        <span>Radio button 2</span>
    </label>

</fieldset>
 
<fieldset class="form-item">
    <legend class="form-item__legend" id="">Radio buttons</legend>

    {{{ ariainvalid }}}
    {{#each radios}}
        <label for="{{value}}" class="radio__label">
            <input id="{{value}}" type="{{type}}" name="{{name}}" class="radio__input"{{#if disabled}} disabled{{/if}}{{#if checked}} checked{{/if}} {{{ getattributes attr }}}>
            <span>{{label}}</span>
        </label>
    {{/each}}

    {{#if errorMsg}}
        <div class="form-item__error-msg">{{errorMsg}}</div>
    {{/if}}
</fieldset>
 
{
  "radios": [
    {
      "name": "radios",
      "disabled": false,
      "checked": false,
      "label": "Radio button 1",
      "value": "radio-1",
      "type": "radio"
    },
    {
      "name": "radios",
      "disabled": false,
      "checked": false,
      "label": "Radio button 2",
      "value": "radio-2",
      "type": "radio"
    }
  ]
}
  • Content: 
    .radio__input {
    position: absolute;
    height: size(3);
    width: size(3);
}

%radio__label {
    display: block;
    position: relative;
    padding-left: size(4);
    color: $color-black;
    margin-bottom: size(2);
    line-height: size(3);

    > span:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        display: inline-block;
        height: size(3);
        width: size(3);
        border: 1px solid $color-input-border;
        background-color: $color-input-background;
        border-radius: 100%;
        // Makes lable center aligned with input field
        margin-top: -2px;
    }

    > input {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
    }

    input:checked ~ span {
        color: $color-input-selected;

        &:before {
            border: size(.75) solid $color-input-selected;
        }
    }

    input[aria-invalid='true']:not(:checked) ~ span, input.error {
        color: $color-error;

        &:before {
            border-color: $color-input-border-error;
        }
    }

    input:disabled + & {
        color: $color-input-color-disabled;
        &:before {
            border-color: $color-input-border-disabled;
        }
    }
}

.radio__label {
    @extend %radio__label
}
  • URL: /components/raw/radio/radio.scss
  • Filesystem Path: src/components/form/radio/radio.scss
  • Size: 1.3 KB

No notes defined.