A radio toggle button behaves like a traditional radio button but is styled to look like toggle buttons instead of circles. This is useful for modern UI designs, especially in filters and preferences.

Radio Toggle buttons

Toggle buttons can be grouped in a button group if needed.

Yes

<div class="radio-group">
    <div>
        <label class="form-radio-btn-label form-label-sm active" tabindex="0" for="radio-11">
            <input type="radio" class="form-radio-btn" aria-label="Yes" id="radio-11" name="radio" checked="" />
            <span class="form-radio-label__text">Yes</span>
        </label>
    </div>
    <div>
        <label class="form-radio-btn-label form-label-sm" tabindex="0" for="radio-12">
        <input type="radio" class="form-radio-btn" aria-label="No" id="radio-12" name="radio" />
        <span class="form-radio-label__text">No</span></label>
    </div>
</div>