Radio group

Default
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<div class="form-field">
    <label class="form-label">Select option</label>
    <div class="form-radio-group">
        <label class="form-radio-item is-multiline">
            <input type="radio" name="option" class="form-radio" />
            <div class="form-radio-body">
                <div class="form-radio-hl">Option A</div>
                <div class="form-radio-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
            </div>
        </label>
        <label class="form-radio-item is-multiline">
            <input type="radio" name="option" class="form-radio" />
            <div class="form-radio-body">
                <div class="form-radio-hl">Option B</div>
                <div class="form-radio-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
            </div>
        </label>
        <label class="form-radio-item is-multiline">
            <input type="radio" name="option" class="form-radio" />
            <div class="form-radio-body">
                <div class="form-radio-hl">Option C</div>
                <div class="form-radio-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
            </div>
        </label>
    </div>
    <small class="form-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</small>
</div>
Vertical
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<div class="form-field">
    <label class="form-label">Select option (vertical)</label>
    <div class="form-radio-group form-radio-group-vertical">
        <label class="form-radio-item is-multiline">
            <input type="radio" name="option" class="form-radio" />
            <div class="form-radio-body">
                <div class="form-radio-hl">Option A</div>
                <div class="form-radio-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
            </div>
        </label>
        <label class="form-radio-item is-multiline">
            <input type="radio" name="option" class="form-radio" />
            <div class="form-radio-body">
                <div class="form-radio-hl">Option B</div>
                <div class="form-radio-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
            </div>
        </label>
        <label class="form-radio-item is-multiline">
            <input type="radio" name="option" class="form-radio" />
            <div class="form-radio-body">
                <div class="form-radio-hl">Option C</div>
                <div class="form-radio-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
            </div>
        </label>
    </div>
    <small class="form-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</small>
</div>
SASS reference
$form-radio-group-gap: rem(10);
$form-radio-group-item-padding: rem(20);
$form-radio-group-width: rem(300);
    
--r-form-radio-group-gap: #{$form-radio-group-gap};
--r-form-radio-group-item-padding: #{$form-radio-group-item-padding};
--r-form-radio-group-width: #{$form-radio-group-width};
--r-form-radio-selected-border-color: var(--r-color-primary);
--r-form-radio-selected-background-color: color-mix(in srgb, var(--r-color-primary), white 97%);
--r-form-radio-text-color: color-mix(in srgb, var(--r-form-text-color), black 40%);