Make radio group looks like tabs

I

I like to use tabs. They are neat. They allows you to have multiple regions on page without cluttering page. They can also replace headers, if you have just one region in each tab.

But sometimes I would like to have dynamic tabs (not just the names, also the number of tabs), so here is one method how to achieve that:

Steps needed:

• create page item with Type = Radio Group
• at Settings set number of columns to whatever you need and Page Action to "Redirect and Set Value" (or create DA if you don't want the page refresh)
• at List of Values properties specify your source for the tabs
• at Appearance and Template Options pick "Display as Pill Button" at Item Group Display
• at Appearance add "TABS" as CSS Classes
• add CSS styles (below) to style these buttons as tabs

And here is the CSS for Redwood:

/* STYLE RADIO BUTTONS AS TABS */
.TABS .t-Form-labelContainer {
    display             : none;
}
.TABS .apex-item-grid-row {
    display             : flex !important;
}
.TABS .apex-item-grid-row .apex-item-option {
    margin              : 0.5rem 6px 0.75rem 0;
}
.TABS .apex-item-grid-row .apex-item-option label {
    border              : 0;
    background          : transparent !important;
    box-shadow          : none !important;
    font-size           : 1rem;
    font-weight         : 600;
    color               : #444 !important;
    padding             : 0.6rem 0.75rem;
    border-bottom       : 8px solid #ededed;
    outline             : none !important;
}
.TABS .apex-item-grid-row .apex-item-option input:checked + label {
    color               : #000 !important;
    border-bottom       : 8px solid #5f5c58;
}
.TABS .apex-item-grid-row .apex-item-option label:hover {
    color               : #000 !important;
    border-bottom       : 8px solid #333 !important;
}