Radio group
Default
<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
<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%);