Home/Explore/

Radio button group

CSS Layout - Most popular layouts and patterns that can be built with CSS | Product Hunt Embed
<style>
.p-radio-button-group label {
    border-right: 1px solid rgba(0, 0, 0, 0.3);
}

/* Remove the right border from the last label */
.p-radio-button-group label:last-child {
    border-right-color: transparent;
}
</style>

<div
    class="p-radio-button-group"
    style="
        display: flex;

        /* Border */
        border: 1px solid rgba(0, 0, 0, 0.3);
        border-radius: 4px;
        height: 32px;
    "
>
    <!-- Each radio item -->
    <label style="
        /* Center the content */
        align-items: center;
        display: inline-flex;

        padding: 8px;

        /* For selected radio */
        background-color: #00449E;
        color: #FFF;

        /* For not selected radio */
        background-color: transparent;
        color: #CCC;
    ">
        <!-- The radio input -->
        <input
            type="radio"
            style="
                /* Hide it */
                display: none;
            "
        />

        <!-- The text -->
        ...
    </label>

    <!-- Repeat other items -->
    ...
</div>

Related patterns

Custom checkbox button

Custom radio button

Subscribe to the newsletter for the latest layouts or patterns. No spam. Ever!