Radio Buttons

Class

UncheckedChecked

Option

States

DefaultHoverSelectedDisabled

Option

Code

HTMLCSS

<!-- Apply radio class to parent container -->
<div class="radio"> 
    <!-- id: unique to each button, name: same for all buttons in group -->
    <input type="radio" class="icon" id="option-name" name="radio-group" value="option">
    <!-- value: matches label text -->
    <label for="option-name" class="label">Option</label>
</div>

.radio{
    @include radio-defaults;

    &.hover:not(.disabled) > .icon,
    &:hover:not(.disabled) > .icon{
        outline: var(--token-radio-outline-width-hover) solid var(--token-radio-color-hover);
        outline-offset: var(--token-radio-outline-offset-hover);
    }

    &.selected:not(.disabled) > .icon, 
    &:active:not(.disabled) > .icon {
        outline: var(--token-radio-outline-width-hover) solid var(--token-radio-color);
        outline-offset: var(--token-radio-outline-offset-hover);
    } 

    &.disabled,
    :disabled {
        > .icon {
            cursor: not-allowed;
            pointer-events: none;
            outline: var(--token-radio-outline-width-disabled) solid var(--token-radio-color-disabled);
            outline-offset: var(--token-radio-outline-offset-disabled);
            background-color: var(--token-radio-bg-color-disabled);
        }
        > .label {
            color: var(--token-radio-label-color-disabled);
        }
    }
}

Option

Code

HTMLCSS

<!-- Apply radio class to parent container -->
<div class="radio hover"> 
    <!-- id: unique to each button, name: same for all buttons in group -->
    <input type="radio" class="icon" id="option-name" name="radio-group" value="option">
    <!-- value: matches label text -->
    <label for="option-name" class="label">Option</label>
</div>

.radio{
    @include radio-defaults;

    &.hover:not(.disabled) > .icon,
    &:hover:not(.disabled) > .icon{
        outline: var(--token-radio-outline-width-hover) solid var(--token-radio-color-hover);
        outline-offset: var(--token-radio-outline-offset-hover);
    }

    &.selected:not(.disabled) > .icon, 
    &:active:not(.disabled) > .icon {
        outline: var(--token-radio-outline-width-hover) solid var(--token-radio-color);
        outline-offset: var(--token-radio-outline-offset-hover);
    } 

    &.disabled,
    :disabled {
        > .icon {
            cursor: not-allowed;
            pointer-events: none;
            outline: var(--token-radio-outline-width-disabled) solid var(--token-radio-color-disabled);
            outline-offset: var(--token-radio-outline-offset-disabled);
            background-color: var(--token-radio-bg-color-disabled);
        }
        > .label {
            color: var(--token-radio-label-color-disabled);
        }
    }
}

Option

Code

HTMLCSS

<!-- Apply radio class to parent container -->
<div class="radio selected"> 
    <!-- id: unique to each button, name: same for all buttons in group -->
    <input type="radio" class="icon" id="option-name" name="radio-group" value="option">
    <!-- value: matches label text -->
    <label for="option-name" class="label">Option</label>
</div>

.radio{
    @include radio-defaults;

    &.hover:not(.disabled) > .icon,
    &:hover:not(.disabled) > .icon{
        outline: var(--token-radio-outline-width-hover) solid var(--token-radio-color-hover);
        outline-offset: var(--token-radio-outline-offset-hover);
    }

    &.selected:not(.disabled) > .icon, 
    &:active:not(.disabled) > .icon {
        outline: var(--token-radio-outline-width-hover) solid var(--token-radio-color);
        outline-offset: var(--token-radio-outline-offset-hover);
    } 

    &.disabled,
    :disabled {
        > .icon {
            cursor: not-allowed;
            pointer-events: none;
            outline: var(--token-radio-outline-width-disabled) solid var(--token-radio-color-disabled);
            outline-offset: var(--token-radio-outline-offset-disabled);
            background-color: var(--token-radio-bg-color-disabled);
        }
        > .label {
            color: var(--token-radio-label-color-disabled);
        }
    }
}

Option

Code

HTMLCSS

<!-- Apply radio class to parent container -->
<div class="radio disabled"> 
    <!-- id: unique to each button, name: same for all buttons in group -->
    <input type="radio" class="icon" id="option-name" name="radio-group" value="option" disabled>
    <!-- value: matches label text -->
    <label for="option-name" class="label">Option</label>
</div>

.radio{
    @include radio-defaults;

    &.hover:not(.disabled) > .icon,
    &:hover:not(.disabled) > .icon{
        outline: var(--token-radio-outline-width-hover) solid var(--token-radio-color-hover);
        outline-offset: var(--token-radio-outline-offset-hover);
    }

    &.selected:not(.disabled) > .icon, 
    &:active:not(.disabled) > .icon {
        outline: var(--token-radio-outline-width-hover) solid var(--token-radio-color);
        outline-offset: var(--token-radio-outline-offset-hover);
    } 

    &.disabled,
    :disabled {
        > .icon {
            cursor: not-allowed;
            pointer-events: none;
            outline: var(--token-radio-outline-width-disabled) solid var(--token-radio-color-disabled);
            outline-offset: var(--token-radio-outline-offset-disabled);
            background-color: var(--token-radio-bg-color-disabled);
        }
        > .label {
            color: var(--token-radio-label-color-disabled);
        }
    }
}

Option

States

DefaultHoverSelectedDisabled

Option

Code

HTMLCSS

<!-- Apply radio-checked class to parent container -->
<div class="radio-checked"> 
    <!-- id: unique to each button, name: same for all buttons in group -->
    <input type="radio" class="icon" id="option-name" name="radio-group" value="option" checked>
    <!-- value: matches label text -->
    <label for="option-name" class="label">Option</label>
</div>

.radio-checked, .radio:has(.icon:checked)  {
    @include radio-defaults;
    .icon {
        border: var(--token-radio-outline-width) solid transparent;
        display: grid;
        place-content: center;
        &::before {
            content: "";
            width: var(--token-radio-check-size);
            height: var(--token-radio-check-size);
            border-radius: var(--token-radio-radius);
            background-color: var(--token-radio-color);
        }

    }
    .label {
        color: var(--token-radio-label-color);
    }
    &.hover:not(.disabled) > .icon,
    &:hover:not(.disabled) > .icon{
        outline: var(--token-radio-outline-width-hover) solid var(--token-radio-color-hover);
        outline-offset: var(--token-radio-outline-offset-hover);
        &::before {
            background-color: var(--token-radio-color-hover);
        }
    }
    &.selected:not(.disabled) > .icon, 
    &:active:not(.disabled) > .icon {
        outline: var(--token-radio-outline-width-selected) solid var(--token-radio-color-selected);
        outline-offset: var(--token-radio-outline-offset-selected);
        &::before {
            background-color: var(--token-radio-color-selected);
        }
    } 

    &.disabled,
    :disabled {
        > .icon {
            cursor: not-allowed;
            pointer-events: none;
            outline: var(--token-radio-outline-width-disabled) solid var(--token-radio-color-disabled);
            background-color: var(--token-radio-bg-color-disabled);
            &::before {
                background-color: var(--token-radio-color-disabled);
            }
        }
        > .label {
            color: var(--token-radio-label-color-disabled);
        }
    }
}

Option

Code

HTMLCSS

<!-- Apply radio-checked class to parent container -->
<div class="radio-checked hover">
    <!-- id: unique to each button, name: same for all buttons in group -->
    <input type="radio" class="icon" id="option-name" name="radio-group" value="option" checked>
    <!-- value: matches label text -->
    <label for="option-name" class="label">Option</label>
</div>

.radio-checked, .radio:has(.icon:checked)  {
    @include radio-defaults;
    .icon {
        border: var(--token-radio-outline-width) solid transparent;
        display: grid;
        place-content: center;
        &::before {
            content: "";
            width: var(--token-radio-check-size);
            height: var(--token-radio-check-size);
            border-radius: var(--token-radio-radius);
            background-color: var(--token-radio-color);
        }

    }
    .label {
        color: var(--token-radio-label-color);
    }
    &.hover:not(.disabled) > .icon,
    &:hover:not(.disabled) > .icon{
        outline: var(--token-radio-outline-width-hover) solid var(--token-radio-color-hover);
        outline-offset: var(--token-radio-outline-offset-hover);
        &::before {
            background-color: var(--token-radio-color-hover);
        }
    }
    &.selected:not(.disabled) > .icon, 
    &:active:not(.disabled) > .icon {
        outline: var(--token-radio-outline-width-selected) solid var(--token-radio-color-selected);
        outline-offset: var(--token-radio-outline-offset-selected);
        &::before {
            background-color: var(--token-radio-color-selected);
        }
    } 

    &.disabled,
    :disabled {
        > .icon {
            cursor: not-allowed;
            pointer-events: none;
            outline: var(--token-radio-outline-width-disabled) solid var(--token-radio-color-disabled);
            background-color: var(--token-radio-bg-color-disabled);
            &::before {
                background-color: var(--token-radio-color-disabled);
            }
        }
        > .label {
            color: var(--token-radio-label-color-disabled);
        }
    }
}

Option

Code

HTMLCSS

<!-- Apply radio-checked class to parent container -->
<div class="radio-checked selected"> 
    <!-- id: unique to each button, name: same for all buttons in group -->
    <input type="radio" class="icon" id="option-name" name="radio-group" value="option" checked>
    <!-- value: matches label text -->
    <label for="option-name" class="label">Option</label>
</div>

.radio-checked, .radio:has(.icon:checked)  {
    @include radio-defaults;
    .icon {
        border: var(--token-radio-outline-width) solid transparent;
        display: grid;
        place-content: center;
        &::before {
            content: "";
            width: var(--token-radio-check-size);
            height: var(--token-radio-check-size);
            border-radius: var(--token-radio-radius);
            background-color: var(--token-radio-color);
        }

    }
    .label {
        color: var(--token-radio-label-color);
    }
    &.hover:not(.disabled) > .icon,
    &:hover:not(.disabled) > .icon{
        outline: var(--token-radio-outline-width-hover) solid var(--token-radio-color-hover);
        outline-offset: var(--token-radio-outline-offset-hover);
        &::before {
            background-color: var(--token-radio-color-hover);
        }
    }
    &.selected:not(.disabled) > .icon, 
    &:active:not(.disabled) > .icon {
        outline: var(--token-radio-outline-width-selected) solid var(--token-radio-color-selected);
        outline-offset: var(--token-radio-outline-offset-selected);
        &::before {
            background-color: var(--token-radio-color-selected);
        }
    } 

    &.disabled,
    :disabled {
        > .icon {
            cursor: not-allowed;
            pointer-events: none;
            outline: var(--token-radio-outline-width-disabled) solid var(--token-radio-color-disabled);
            background-color: var(--token-radio-bg-color-disabled);
            &::before {
                background-color: var(--token-radio-color-disabled);
            }
        }
        > .label {
            color: var(--token-radio-label-color-disabled);
        }
    }
}

Option

Code

HTMLCSS

<!-- Apply radio-checked class to parent container -->
<div class="radio-checked disabled"> 
    <!-- id: unique to each button, name: same for all buttons in group -->
    <input type="radio" class="icon" id="option-name" name="radio-group" value="option" checked disabled>
    <!-- value: matches label text -->
    <label for="option-name" class="label">Option</label>
</div>

.radio-checked, .radio:has(.icon:checked)  {
    @include radio-defaults;
    .icon {
        border: var(--token-radio-outline-width) solid transparent;
        display: grid;
        place-content: center;
        &::before {
            content: "";
            width: var(--token-radio-check-size);
            height: var(--token-radio-check-size);
            border-radius: var(--token-radio-radius);
            background-color: var(--token-radio-color);
        }

    }
    .label {
        color: var(--token-radio-label-color);
    }
    &.hover:not(.disabled) > .icon,
    &:hover:not(.disabled) > .icon{
        outline: var(--token-radio-outline-width-hover) solid var(--token-radio-color-hover);
        outline-offset: var(--token-radio-outline-offset-hover);
        &::before {
            background-color: var(--token-radio-color-hover);
        }
    }
    &.selected:not(.disabled) > .icon, 
    &:active:not(.disabled) > .icon {
        outline: var(--token-radio-outline-width-selected) solid var(--token-radio-color-selected);
        outline-offset: var(--token-radio-outline-offset-selected);
        &::before {
            background-color: var(--token-radio-color-selected);
        }
    } 

    &.disabled,
    :disabled {
        > .icon {
            cursor: not-allowed;
            pointer-events: none;
            outline: var(--token-radio-outline-width-disabled) solid var(--token-radio-color-disabled);
            background-color: var(--token-radio-bg-color-disabled);
            &::before {
                background-color: var(--token-radio-color-disabled);
            }
        }
        > .label {
            color: var(--token-radio-label-color-disabled);
        }
    }
}