Radio Box

Radio box is a variant of a custom radio element that looks like a box.

Structurally .radio-box element contains the following elements:

• .radio-box__label - class for the label of the radio box
• .radio-box__input - class for the input with the type="radio" attribute

And following modifiers:

• .radio-box_disabled - modifier class for the disabled radio box
• .radio-box_error - modifier class for the radio box with errors

Examples

Basic radio box

Example label

HTML

    <div class="radio-box">
        <input type="radio" id="example1" name="my-example" class="radio-box__input" />
        <label class="radio-box__label" for="example1">Example label</label>
    </div>

Disabled radio box

Example label

HTML

    <div class="radio-box radio-box_disabled">
        <input type="radio" id="example2" name="my-example" class="radio-box__input" disabled />
        <label class="radio-box__label" for="example2">Example label</label>
    </div>

Checked radio box

Example label

HTML

    <div class="radio-box">
        <input type="radio" id="example3" name="my-example" class="radio-box__input" checked />
        <label class="radio-box__label" for="example3">Example label</label>
    </div>

Radio box with errors

Example label

HTML

    <div class="radio-box radio-box_error">
        <input type="radio" id="example4" name="my-example" class="radio-box__input" />
        <label class="radio-box__label" for="example4">Example label</label>
    </div>

Radio box with hint

Example label Example hint

HTML

    <div class="radio-box">
        <input type="radio" id="example5" name="my-example" class="radio-box__input" />

        <h-hint>
            <label class="radio-box__label" for="example5">Example label</label>

            <h-hint-content>Example hint</h-hint-content>
        </h-hint>
    </div>

LESS

You can modify any radio box less variable in your User Less section to change radio box styles.

Radio Box variables

Variables used to style radio boxes.

@radioBoxSelectedColor: @primaryColor;
@radioBoxDisabledSelectedColor: @neutralColors100;

@radioBoxMinHeight: 44px;
@radioBoxBorderRadius: 2px;
@radioBoxBorder: 1px solid @neutralColors200;
@radioBoxSelectedBorder: 1px solid @primaryColors500;

@radioBoxSelectedBgColor: @primaryColors50;

@radioBoxSelectedBadgeSize: 16px;
@radioBoxSelectedBadgeTop: -4px;
@radioBoxSelectedBadgeRight: -4px;
@radioBoxSelectedBadgeBgColor: @radioBoxSelectedColor;
@radioBoxSelectedBadgeIconUrl: url("data:image/svg+xml,%3Csvg width='10' height='8' viewBox='0 0 10 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 1L3.5 6.5L1 4' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
@radioBoxSelectedDisabledBadgeIconUrl: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 3L3 9' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M3 3L9 9' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");

@radioBoxDisabledSelectedBorderColor: @radioBoxDisabledSelectedColor;
@radioBoxDisabledSelectedCrossLine: linear-gradient(to top left, transparent 48%, @radioBoxDisabledSelectedColor, transparent 52%);

@radioBoxLabelPaddingVertical: 12;
@radioBoxLabelPaddingHorizontal: 12;
@radioBoxLabelColor: @globalFontColorSecondary;

@radioBoxDisabledColor: @globalFontColorSecondary;
@radioBoxDisabledBgColor: @neutralColors50;
@radioBoxDisabledBorderColor: @neutralColors200;
@radioBoxDisabledCrossLine: linear-gradient(to top left, transparent 48%, @radioBoxDisabledBorderColor, transparent 52%);

@radioBoxShadowFocus: @inputBoxShadowFocus;

@radioBoxBackgroundColor: @globalBodyBackgroundColor;
@radioBoxBackgroundColorHover: darken(@radioBoxBackgroundColor, 5%);

If you want to change radio box styles, you can just change the variables. To change default border-radius just modify @radioBoxBorderRadius variable.

@radioBoxBorderRadius: 10px;

Radio Box styles

Standard radio box styles.

.radio-box {
    width: fit-content;
    position: relative;
    border-radius: @radioBoxBorderRadius;
    .size-s();

    &__label {
        min-height: @radioBoxMinHeight;
        min-width: @radioBoxMinHeight;
        border-radius: @radioBoxBorderRadius;
        border: @radioBoxBorder;
        background-color: @radioBoxBackgroundColor;

        display: block;

        .pixel-to-rem(padding-top, @radioBoxLabelPaddingVertical);
        .pixel-to-rem(padding-right, @radioBoxLabelPaddingHorizontal);
        .pixel-to-rem(padding-bottom, @radioBoxLabelPaddingVertical);
        .pixel-to-rem(padding-left, @radioBoxLabelPaddingHorizontal);

        color: @radioBoxLabelColor;

        word-break: break-word;
        text-align: center;

        cursor: pointer;

        &::before {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: -1;
        }

        &:hover {
            background-color: @radioBoxBackgroundColorHover;
        }
    }

    &:active,
    &:focus-within {
        .radio-box__label {
            box-shadow: @radioBoxShadowFocus;
        }
    }

    &__input {
        position: absolute;
        width: 100%;
        height: 100%;

        user-select: none;
        clip: rect(1px, 1px, 1px, 1px);
    }

    &__input:checked + .radio-box__label {
        background-color: @radioBoxSelectedBgColor;
        border-radius: @radioBoxBorderRadius;
        border: @radioBoxSelectedBorder;

        .weight-semibold();

        &:before {
            content: '';
            display: block;
            position: absolute;
            top: @radioBoxSelectedBadgeTop;
            right: @radioBoxSelectedBadgeRight;
            width: @radioBoxSelectedBadgeSize;
            height: @radioBoxSelectedBadgeSize;
            background-color: @radioBoxSelectedBadgeBgColor;
            background-image: @radioBoxSelectedBadgeIconUrl;
            background-repeat: no-repeat;
            background-position: center;
            border-radius: 100%;
            z-index: 1;
        }
    }

    &_disabled {
        .radio-box__label {
            background-color: @radioBoxDisabledBgColor;
            color: @radioBoxDisabledColor;

            &::after {
                content: '';
                background-image: @radioBoxDisabledCrossLine;
                display: block;
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }
        }

        .radio-box__input:checked + .radio-box__label {
            background-color: @radioBoxDisabledBgColor;
            border-color: @radioBoxDisabledSelectedColor;

            &::before {
                background-image: @colorItemSelectedDisabledIconUrl;
            }

            &::after {
                background-image: @radioBoxDisabledSelectedCrossLine;
            }
        }
    }
}