Radio

Tailwind CSS and Alpine JS Radio

Radio buttons allow users to select one option from a list of options.

Default radio

A radio button with a label. This component uses before pseudo-element instead of the browser's default radio button dot indicator. It makes the code slightly more complex, but it provides the luxury of customizing the style of the radio button.

HTML 
<div class="">
    <div class="">
        <input id="radioMac" type="radio" class="" name="radioDefault" value="" checked >
        <label for="radioMac" class="">Mac</label>
    </div>
    <div class="">
        <input id="radioWindows" type="radio" class="" name="radioDefault" value="">
        <label for="radioWindows" class="">Windows</label>
    </div>
    <div class="">
        <input id="radioLinux" type="radio" class="" name="radioDefault" value="">
        <label for="radioLinux" class="">Linux</label>
    </div>
</div>

Radio with container

A radio button with a contrasting background and label that makes it easy to find and interact with it.

HTML 
<div class="">
    <label for="radioMac" class="">
        <input id="radioMac" type="radio" class="" name="radioDefault" value="" checked >
        <span class="">Mac</span>
    </label>
    <label for="radioWindows" class="">
        <input id="radioWindows" type="radio" class="" name="radioDefault" value="">
        <span class="">Windows</span>
    </label>
    <label for="radioLinux" class="">
        <input id="radioLinux" type="radio" class="" name="radioDefault" value="">
        <span class="">Linux</span>
    </label>
</div>

Radio with description

A radio button with a label and description.

For macOS Big Sur and higher
HTML 
<div class="">
    <div class="">
        <input id="radioMac" type="radio" class="" name="radioDefault" value="" aria-describedby="radioMacDescription" checked >
        <label for="radioMac" class="">Mac</label>
    </div>
    <span id="radioMacDescription" class="">For macOS Big Sur and higher</span>
</div>

Radio color variants

A radio button with a label and description in various colors.

HTML 
<!-- primary Radio -->
<div class="">
    <input id="radioPrimary" type="radio" class="" value="" checked >
    <label for="radioPrimary" class="">Primary</label>
</div>

<!-- secondary Radio -->
<div class="">
    <input id="radioSecondary" type="radio" class="" value="" checked >
    <label for="radioSecondary" class="">Secondary</label>
</div>

<!-- success Radio -->
<div class="">
    <input id="radioSuccess" type="radio" class="" value="" checked >
    <label for="radioSuccess" class="">Success</label>
</div>

<!-- info Radio -->
<div class="">
    <input id="radioInfo" type="radio" class="" value="" checked >
    <label for="radioInfo" class="">Info</label>
</div>

<!-- warning Radio -->
<div class="">
    <input id="radioWarning" type="radio" class="" value="" checked >
    <label for="radioWarning" class="">Warning</label>
</div>

<!-- danger Radio -->
<div class="">
    <input id="radioDanger" type="radio" class="" value="" checked >
    <label for="radioDanger" class="">Danger</label>
</div>

Custom radio

Examples of cards as radio buttons.

HTML 
<div class="">
    <!-- Mac -->
    <label class="">
        <input type="radio" id="osMac" aria-describedby="macDescription" class="" name="os" value="mac" checked >
        <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 16 16" fill="currentColor" class="">
            <path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd">
        </svg>
        <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="" viewBox="0 0 16 16">
            <path d="M11.182.008C11.148-.03 9.923.023 8.857 1.18c-1.066 1.156-.902 2.482-.878 2.516s1.52.087 2.475-1.258.762-2.391.728-2.43m3.314 11.733c-.048-.096-2.325-1.234-2.113-3.422s1.675-2.789 1.698-2.854-.597-.79-1.254-1.157a3.7 3.7 0 0 0-1.563-.434c-.108-.003-.483-.095-1.254.116-.508.139-1.653.589-1.968.607-.316.018-1.256-.522-2.267-.665-.647-.125-1.333.131-1.824.328-.49.196-1.422.754-2.074 2.237-.652 1.482-.311 3.83-.067 4.56s.625 1.924 1.273 2.796c.576.984 1.34 1.667 1.659 1.899s1.219.386 1.843.067c.502-.308 1.408-.485 1.766-.472.357.013 1.061.154 1.782.539.571.197 1.111.115 1.652-.105.541-.221 1.324-1.059 2.238-2.758q.52-1.185.473-1.282">
        </svg>
        <div class="">
            <h3 class="" aria-hidden="true">Mac</h3>
            <small id="macDescription">MacOS Catalina and higher</small>
        </div>
    </label>
    <!-- Windows -->
    <label class="">
        <input type="radio" id="osWindows" aria-describedby="windowsDescription" class="" name="os" value="windows">
        <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 16 16" fill="currentColor" class="">
            <path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd">
        </svg>
        <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="" viewBox="0 0 16 16">
            <path d="M6.555 1.375 0 2.237v5.45h6.555zM0 13.795l6.555.933V8.313H0zm7.278-5.4.026 6.378L16 16V8.395zM16 0 7.33 1.244v6.414H16z">
        </svg>
        <div class="">
            <h3 class="" aria-hidden="true">Windows</h3>
            <small id="windowsDescription">Windows 10 and higher</small>
        </div>
    </label>
    <!-- Linux -->
    <label class="">
        <input type="radio" id="osLinux" aria-describedby="linuxDescription" class="" name="os" value="linux">
        <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 16 16" fill="currentColor" class="">
            <path fill-rule="evenodd" d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z" clip-rule="evenodd">
        </svg>
        <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="" viewBox="0 0 16 16">
            <path d="M2.273 9.53a2.273 2.273 0 1 0 0-4.546 2.273 2.273 0 0 0 0 4.547Zm9.467-4.984a2.273 2.273 0 1 0 0-4.546 2.273 2.273 0 0 0 0 4.546M7.4 13.108a5.54 5.54 0 0 1-3.775-2.88 3.27 3.27 0 0 1-1.944.24 7.4 7.4 0 0 0 5.328 4.465c.53.113 1.072.169 1.614.166a3.25 3.25 0 0 1-.666-1.9 6 6 0 0 1-.557-.091m3.828 2.285a2.273 2.273 0 1 0 0-4.546 2.273 2.273 0 0 0 0 4.546m3.163-3.108a7.44 7.44 0 0 0 .373-8.726 3.3 3.3 0 0 1-1.278 1.498 5.57 5.57 0 0 1-.183 5.535 3.26 3.26 0 0 1 1.088 1.693M2.098 3.998a3.3 3.3 0 0 1 1.897.486 5.54 5.54 0 0 1 4.464-2.388c.037-.67.277-1.313.69-1.843a7.47 7.47 0 0 0-7.051 3.745">
        </svg>
        <div class="">
            <h3 class="" aria-hidden="true">Linux</h3>
            <small id="linuxDescription">Ubuntu 20.04 and higher</small>
        </div>
    </label>
</div>

Keyboard Navigation

Key Action
Tab Radio gets the focus
Next radio button gets selected
Previous radio button gets selected