COMPONENTS

Tabs

A tab-style header selects its associated content panel using native radios underneath. Visible radio circles are removed; the selected tab has an accent underline and surface backing. No JavaScript is added.

Usage

Markup: fieldset.tabs, radio labels, .tab-panel

Behaviour: This is radio-selected content, not the ARIA tabs interaction contract.

  • The visual presentation is a tab bar, while the underlying interaction retains radio semantics. Do not add tablist/tab roles or manually maintained aria-selected attributes. Applications requiring the ARIA tabs interaction contract need a separate behaviour layer.
  • Give the fieldset a legend and every radio a label. Use one unique radio name per instance and mark exactly one radio checked. Tab enters the radio group; arrow keys select its native choices.
  • Keep each tab-panel immediately after its label. Panels may contain ordinary headings, links and controls. CSS :has selects the checked radio's following panel. Without :has support, all panels remain readable; print also shows all panels.
  • Theme, shape, size, density, gap, borders and fieldset material follow the parent. Radio controls are visually hidden, not removed from the focus order. Focus appears on the tab label, and native disabled choices remain unavailable. Included in complete, scoped and components builds; modular use: tokens, base and reva.tabs.css.
  • A shared underline glides between selected tabs in browsers supporting CSS anchor positioning and anchor-scope. Other browsers retain a static selected border. No extra class is needed. Parent data-motion controls duration; reduced motion removes the transition. The effect reserves ::after on .tabs.

Component API and styling module · Inherited appearance settings

A tab bar with two panels

Click a tab label or use native radio-group arrow keys. The selected tab is underlined; radio circles are visually hidden.

Account information

Account overview

Your account is active.

Your preferences

Choose preferences in your application settings.

Explore form groups
HTMLSelect text to copy
<fieldset class="tabs">
  <legend>Account information</legend>
  <label>
    <input type="radio" name="account-panels" checked> Overview
  </label>
  <section class="tab-panel">
    <h3>Account overview</h3>
    <p>Your account is active.</p>
  </section>
  <label>
    <input type="radio" name="account-panels"> Preferences
  </label>
  <section class="tab-panel">
    <h3>Your preferences</h3>
    <p>Choose preferences in your application settings.</p>
    <a href="/RevaCSS/components/form-groups/">Explore form groups</a>
  </section>
</fieldset>

An independent instance

A different name keeps this selection independent of the first example.

Documentation view

Start with native elements and shared parent settings.

Add a component class only when the pattern needs one.

HTMLSelect text to copy
<fieldset class="tabs" data-shape="pill" data-gap="small">
  <legend>Documentation view</legend>
  <label><input type="radio" name="documentation-panels" checked> HTML</label>
  <section class="tab-panel">
    <p>Start with native elements and shared parent settings.</p>
  </section>
  <label><input type="radio" name="documentation-panels"> Styling</label>
  <section class="tab-panel">
    <p>Add a component class only when the pattern needs one.</p>
  </section>
</fieldset>

An unavailable tab

Native disabled prevents selection and keyboard focus. Keep an available choice checked; a disabled label explains its unavailable state.

Project views

Project overview

Your active project details.

Reports

This view is currently unavailable.

HTMLSelect text to copy
<fieldset class="tabs">
  <legend>Project views</legend>
  <label><input type="radio" name="project-view-panels" checked> Overview</label>
  <section class="tab-panel"><h3>Project overview</h3><p>Your active project details.</p></section>
  <label><input type="radio" name="project-view-panels" disabled> Reports — unavailable</label>
  <section class="tab-panel"><h3>Reports</h3><p>This view is currently unavailable.</p></section>
</fieldset>