Radio-Button Fancy Edition

TIP

This is a variant of the default radio button that uses large icons and a larger clickable area.

.c-radio-fancy
> .c-radio-fancy__btn
> .c-radio-fancy__input
> .c-radio-fancy__label
> .c-radio-fancy__icon

Font Awesome Icons

• Test 01
• Test 02
• Test 03

Show Code

<ul class="c-radio-fancy">
    <li class="c-radio-fancy__btn">
        <input class="c-radio-fancy__input" type="radio" id="radio-abfuellung" name="fancy-radio-group" checked />
        <label class="c-radio-fancy__label" for="radio-abfuellung">
            <span class="c-radio-fancy__icon fad fa-glass-water-droplet" aria-hidden="true"></span>
            Abfüllung
        </label>
    </li>
    <li class="c-radio-fancy__btn">
        <input class="c-radio-fancy__input" type="radio" id="radio-rezeptur" name="fancy-radio-group" />
        <label class="c-radio-fancy__label" for="radio-rezeptur">
            <span class="c-radio-fancy__icon fad fa-mortar-pestle" aria-hidden="true"></span>
            Rezeptur
        </label>
    </li>
    <li class="c-radio-fancy__btn">
        <input class="c-radio-fancy__input" type="radio" id="disabled-radio" name="fancy-radio-group" disabled />
        <label class="c-radio-fancy__label" for="disabled-radio">
            <span class="c-radio-fancy__icon fad fa-lightbulb" aria-hidden="true"></span>
            Disabled
        </label>
    </li>
</ul>

Disabled

• Abfüllung
• Rezeptur

Show Code

<ul class="c-radio-fancy">
    <li class="c-radio-fancy__btn">
        <input class="c-radio-fancy__input" type="radio" id="test2" disabled checked />
        <label class="c-radio-fancy__label" for="test2">
            <span class="c-radio-fancy__icon fas fa-flask" aria-hidden="true"></span>
            Abfüllung
        </label>
    </li>
    <li class="c-radio-fancy__btn">
        <input class="c-radio-fancy__input" type="radio" id="test2" disabled />
        <label class="c-radio-fancy__label" for="test2">
            <span class="c-radio-fancy__icon fas fa-flask" aria-hidden="true"></span>
            Rezeptur
        </label>
    </li>
</ul>

DuoTone SVG-Icons

WARNING

Icon colors must be set by the c-duotone-icon icon class name itself, this happens automatically in the BasicRadio.vue component.

• Rezeptur
• Abfüllung
• Something

Show Code

<ul class="c-radio-fancy">
    <li class="c-radio-fancy__btn">
        <input class="c-radio-fancy__input" type="radio" id="id-duo1" name="fancy-radio-group-duo" checked />
        <label class="c-radio-fancy__label" for="id-duo1">
            <span class="c-radio-fancy__icon c-duotone-icon -abfuellung_dark"></span>
            Abfüllung
        </label>
    </li>
    <li class="c-radio-fancy__btn">
        <input class="c-radio-fancy__input" type="radio" id="id-duo2" name="fancy-radio-group-duo" />
        <label class="c-radio-fancy__label" for="id-duo2">
            <span class="c-radio-fancy__icon c-duotone-icon -rezeptur_dark"></span>
            Rezeptur
        </label>
    </li>
    <li class="c-radio-fancy__btn">
        <input class="c-radio-fancy__input" type="radio" id="id-duo3" disabled checked />
        <label class="c-radio-fancy__label" for="id-duo3">
            <span class="c-radio-fancy__icon c-duotone-icon -rezeptur_dark"></span>
            Disabled
        </label>
    </li>
</ul>