UHasselt Component Library

Radio Button: Default 

<div class="atm-form-radiobutton ">
    <input type="radio" class="form-radio" id="default" name="demoradio">
    <label class="form-label   " for="input-label">
        Input label
    </label>
</div>
 
<div class="atm-form-radiobutton {{modifier}}">
    <input
        type="radio"
        class="form-radio"
        {{#if id}}id="{{id}}"{{/if}}
        {{#if name}}name="{{name}}"{{/if}}
        {{#if value}}value="{{value}}"{{/if}}
        {{#if checked}}checked{{/if}}
        {{#if disabled}}disabled{{/if}}
    >
        {{#if description}}
            <label 
                class="form-radio-label"
                for="{{label.for}}"
            >
                <div class="form-radio-label-title">
                    {{label.text}}
                </div>

                <div class="form-radio-description">
                    {{description}}
                </div>
            </label>
        {{else}}
            {{render '@label' label merge=true}}
        {{/if}}
</div>
 
{
  "modifier": "",
  "checked": false,
  "disabled": false,
  "name": "demoradio",
  "id": "default"
}
  • Content: 
    .atm-form-radiobutton {
    @apply relative pl-6;

    .form-radio {
        @apply absolute left-0 text-black  border border-solid border-black-400;
        top: 5px;

        &[disabled] {
            @apply bg-black-100;
        }
    }

    &.text-description {
        .form-label {
            font-size: 20px;
            font-weight: 700;
        }
    }

    .form-radio-label {
        display: flex;
        flex-direction: column;
    }

    .form-radio-label-title {
        font-size: 16px;
        font-weight: 700;

        @screen md {
            font-size: 20px;
        }
    }

    .form-radio-label-description {
    }

    &.radio-inverted {
        @apply text-white;

        padding-left: 36px;

        [type='radio']:checked,
        [type='radio']:not(:checked) {
            position: absolute;
            left: -9999px;
        }

        [type='radio']:checked + label:before,
        [type='radio']:not(:checked) + label:before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 22px;
            height: 22px;
            border: 2px solid #ffffff;
            border-radius: 100%;
        }

        [type='radio']:checked + label:after,
        [type='radio']:not(:checked) + label:after {
            @apply bg-white;

            content: '';
            width: 14px;
            height: 14px;
            position: absolute;
            top: 4px;
            left: 4px;
            border-radius: 100%;
            -webkit-transition: all 0.2s ease;
            transition: all 0.2s ease;
        }

        [type='radio']:not(:checked) + label:after {
            opacity: 0;
            -webkit-transform: scale(0);
            transform: scale(0);
        }
        [type='radio']:checked + label:after {
            opacity: 1;
            -webkit-transform: scale(1);
            transform: scale(1);
        }
    }
}
  • URL: /components/raw/radiobutton/radiobutton.css
  • Filesystem Path: src\components\02-atoms\forms\radiobutton\radiobutton.css
  • Size: 2 KB
  • Handle: @radiobutton--default
  • Preview:
  • Filesystem Path: src\components\02-atoms\forms\radiobutton\radiobutton.hbs
  • References (1): @label

No notes defined.