Skip to content

Radio Box Group

Styles for radio box group used in currency_chooser macro and language_chooser macro.

Structurally .radio-box-group contains following elements:

  • .radio-box-group__radio-box

Example

Here is an example of radio box group element usage. For presentation purposes we also used radio-box styles.

HTML
    <div class="radio-box-group">
        <div class="radio-box radio-box-group__radio-box">
            <input
                type="radio"
                id="currency-radio-box-1"
                name="example"
                value="PLN"
                class="radio-box__input"
                checked
            >
            <label class="radio-box__label" for="currency-radio-box-1">
                PLN - złoty polski (zł)
            </label>
        </div>

        <div class="radio-box radio-box-group__radio-box">
            <input
                type="radio"
                id="currency-radio-box-2"
                name="example"
                value="EUR"
                class="radio-box__input"
            >
            <label class="radio-box__label" for="currency-radio-box-2">
                EUR - euro (€)
            </label>
        </div>

        <div class="radio-box radio-box-group__radio-box">
            <input
                type="radio"
                id="currency-radio-box-3"
                name="example"
                value="GBP"
                class="radio-box__input"
            >
            <label class="radio-box__label" for="currency-radio-box-3">
                GBP - funt szterling (GBP)
            </label>
        </div>
    </div>

Radio Box Group tags

The .radio-box-group classes were designed to be used with block elements like <div>. However, you can use them with any other element and customize it to your own needs.

LESS

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

Radio Box Group styles

Here are standard radio box group styles.

.radio-box-group {
    display: flex;
    gap: @globalSpacing;
    flex-wrap: wrap;

    &__radio-box {
        > .radio-box__label {
            display: flex;
            align-items: center;
            column-gap: @globalSpacing / 2;
        }
    }
}

Styles reference

Macros reference