Radio

<div class="radio ">
    <fieldset class="fieldset " aria-labelledby="legend-id">
        <legend class="radio__legend " id="legend-id">
            Choose option
        </legend>
        <div class="radio__handler">
            <input type="radio" id="id1" name="radio1" class="radio__field">
            <label for="id1" class="radio__label">
                <span class="radio__text">
                    Option one
                </span>
            </label>
        </div>
        <div class="radio__handler">
            <input type="radio" id="id2" name="radio1" class="radio__field">
            <label for="id2" class="radio__label">
                <span class="radio__text">
                    Option two
                </span>
            </label>
        </div>
        <div class="radio__handler">
            <input type="radio" id="id3" name="radio1" class="radio__field">
            <label for="id3" class="radio__label">
                <span class="radio__text">
                    Options three Long label text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eu elementum dui, eget volutpat purus. Aliquam ullamcorper tortor non massa rhoncus, in faucibus ligula lacinia.
                </span>
            </label>
        </div>
    </fieldset>
</div>
<div class="radio {{ class }}">
    <fieldset class="fieldset {{ fieldsetClass }}" aria-labelledby="{{ legendId }}">
        {{#if legend }}
            <legend class="radio__legend {{ legendClass }}" id="{{ legendId }}">
                {{ legend }}
            </legend>
        {{/if }}
        {{#each options}}
            <div class="radio__handler">
                <input
                    type="radio"
                    id="{{ id }}"
                    name="{{ ../name }}"
                    class="radio__field"
               >
                <label
                    for="{{ id }}"
                    class="radio__label"
                >
                    <span class="radio__text">
                        {{ label }}
                    </span>
                </label>
            </div>
        {{/each}}
    </fieldset>
</div>
{
  "name": "radio1",
  "fieldsetClass": "",
  "legend": "Choose option",
  "legendId": "legend-id",
  "options": [
    {
      "id": "id1",
      "label": "Option one"
    },
    {
      "id": "id2",
      "label": "Option two"
    },
    {
      "id": "id3",
      "label": "Options three Long label text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque eu elementum dui, eget volutpat purus. Aliquam ullamcorper tortor non massa rhoncus, in faucibus ligula lacinia. "
    }
  ]
}
  • Content:
    $radio__size                    : 24px !default;
    $radio__dot-size                : 12px !default;
    $radio__margin                  : 0 0 $spacer--medium 0 !default;
    $radio__label-font-size         : $font-size-base !default;
    $radio__label-color             : $color-secondary !default;
    $radio__label-color-active      : $color-primary !default;
    $radio__label-font-weight-active: $font-weight-normal !default;
    $radio__label-line-height       : $font-line-height !default;
    $radio__label-margin            : $spacer--small 0 !default;
    $radio__icon-margin-right       : $spacer !default;
    $radio__icon-border             : 2px solid $color-primary !default;
    $radio__icon-background         : $color-primary !default;
    $radio__icon-transition         : $transition-base !default;
    $radio__legend-margin           : $radio__margin !default;
    $radio__text-width              : calc(100% - #{$radio__icon-margin-right + $radio__size}) !default;
    
  • URL: /components/raw/radio/_radio-variables.scss
  • Filesystem Path: build/components/Molecules/form/radio/_radio-variables.scss
  • Size: 932 Bytes
  • Content:
    @import 'radio-variables';
    
    .radio {
        position: relative;
        margin: $radio__margin;
    
        &__legend {
            margin: $radio__legend-margin;
    
            &--hidden {
                @include visually-hidden();
            }
        }
    
        &__handler {
            position: relative;
        }
    
        &__field {
            position: absolute;
            left: 0;
            height: $radio__size;
            width: $radio__size;
            opacity: 0;
            z-index: -1;
    
            &:checked + .radio__label {
                color: $radio__label-color-active;
                font-weight: $radio__label-font-weight-active;
    
                &:before {
                    border-color: $radio__icon-background;
                }
    
                &:after {
                    opacity: 1;
                    transform: scale(1);
                }
            }
    
            &.focus-visible + .radio__label {
                @include focus();
            }
        }
    
        &__label {
            position: relative;
            display: flex;
            flex-flow: row nowrap;
            height: auto;
            width: 100%;
            margin: $radio__label-margin;
            line-height: $radio__label-line-height;
            font-size: $radio__label-font-size;
            color: $radio__label-color;
            cursor: pointer;
    
            &:before {
                content: '';
                position: relative;
                display: inline-block;
                border: $radio__icon-border;
                border-radius: $radio__size;
                width: $radio__size;
                min-width: $radio__size;
                height: $radio__size;
                margin-right: $radio__icon-margin-right;
            }
    
            &:after {
                position: absolute;
                top: 6px;
                left: 6px;
                content: '';
                width: $radio__dot-size;
                height: $radio__dot-size;
                border-radius: $radio__dot-size;
                margin: auto;
                opacity: 0;
                transform: scale(0);
                background-color: $radio__icon-background;
                transition: $radio__icon-transition;
            }
        }
    
        &__text {
            width: $radio__text-width;
        }
    }
    
  • URL: /components/raw/radio/_radio.scss
  • Filesystem Path: build/components/Molecules/form/radio/_radio.scss
  • Size: 2.1 KB

There are no notes for this item.