DEV Community

joachim kliemann
joachim kliemann

Posted on

Building a Tab Component with Pure CSS using Radio and Label Tags

Tabs are an essential UI component, often used to divide content into multiple sections on a single page. While JavaScript is commonly used to develop tabs, did you know you can create a fully functional tab component using just HTML and CSS? This article will guide you through the process of developing a tab component using only the <radio> and <label> tags.

Setting Up the HTML Structure

To begin with, we need to set up the HTML structure. We'll use radio inputs for each tab and labels to toggle between them. The content for each tab will be placed in a corresponding <div>.

<div class="tabs">
    <!-- Tab 1 -->
    <input type="radio" name="tab" id="tab1" checked>
    <label for="tab1">Tab 1</label>
    <div class="tab-content" id="content1">
        Content for Tab 1
    </div>

    <!-- Tab 2 -->
    <input type="radio" name="tab" id="tab2">
    <label for="tab2">Tab 2</label>
    <div class="tab-content" id="content2">
        Content for Tab 2
    </div>

    <!-- Add more tabs as needed... -->
</div>
Enter fullscreen mode Exit fullscreen mode

Notice that all radio inputs have the same name attribute. This ensures that only one tab can be active at a time.

Styling with CSS

Now, let's add some styles:

/* Hide the radio inputs */
.tabs input[type="radio"] {
    display: none;
}

/* Style the labels (tabs) */
.tabs label {
    cursor: pointer;
    display: inline-block;
    margin-right: .2rem;
    padding: .5rem 1rem;
}

/* Style the content sections */
.tab-content {
    display: none;
    padding: 1rem;
}

/* Display content when a tab is selected */
.tabs input[type="radio"]:checked + label + .tab-content {
    display: block;
}
Enter fullscreen mode Exit fullscreen mode

The key trick here is the :checked pseudo-class. When a radio input is checked, the adjacent label and .tab-content will be affected by the styles we define.

Enhancing the Active Tab

To give users a visual cue about which tab is active, let's highlight the active tab:

.tabs input[type="radio"]:checked + label {
    background-color: #ddd;
}
Enter fullscreen mode Exit fullscreen mode

This will change the background color of the active tab and remove its bottom border, creating a seamless look with the content section.

Final Result

Conclusion

By leveraging the power of the <radio> and <label> tags, combined with the capabilities of CSS, we've created a functional and stylish tab component without any JavaScript. This approach is lightweight, accessible, and offers a great user experience. Feel free to enhance the styles further to fit the design needs of your project!

Top comments (1)

Collapse
 
d7460n profile image
D7460N

Nice article. Thanks for sharing!

I am attempting the same, but the radio inputs are in the tab content and the labels are separated in the <nav>. Why doesn't this work?

<app-container>
  <header>HEADER</header>
  <nav>
    <ul>
      <li>
        <label for="tab01">Tab01</label>
      </li>
      <li>
        <label for="tab02">Tab02</label>
      </li>
    </ul>
  </nav>
  <main>
    <article>
      <input type="radio" id="tab02" name="nav">
      <p>Tab01 content</p>
    </article>
    <article>
      <input type="radio" id="tab02" name="nav">
      <p>Tab02 content</p>
    </article>
  </main>
  <footer>FOOTER</footer>
</app-container>
Enter fullscreen mode Exit fullscreen mode

CSS

input {display: none;}
article {display: none;}
article input:checked {display: grid;}
Enter fullscreen mode Exit fullscreen mode