Tabs

Yangshun TayEx-Meta Staff Engineer

Build a tabs component that displays one panel of content at a time depending on the active tab element. Some HTML is provided for you as example content.

Requirements

Clicking a tab makes it the active tab. Add a visual indication (e.g. using blue text color) for the active tab to differentiate it from the non-active tabs.
At all times, only one panel's contents should be displayed — the one corresponding to the active tab.

Notes

The focus of this question is functionality, not styling. There's no need to write any custom CSS except for highlighting the active tab.
You may modify the markup (e.g. adding ids, data attributes, replacing some tags, etc.) and use client-side rendering instead.
You may want to think about ways to improve the user experience of the application and implement them (you get bonus credit for doing that during interviews).

Asked at these companies

Unlock company signalsPremium shows which companies ask this question so you can prioritize practice by target company.

Unlock

Tabs (Official solution)

Yangshun TayEx-Meta Staff Engineer

Solution files

1<script>
export let items;
export let defaultValue = undefined;
let value = defaultValue ?? items[0].value;
5</script>
6
7<div class="tabs">
<div class="tabs-list">
  {#each items as item (item.value)}
    <button
      type="button"
      class:tabs-list-item--active={item.value === value}
      class="tabs-list-item"
      on:click={() => (value = item.value)}>
      {item.label}
    </button>
  {/each}
</div>
{#each items as item (item.value)}
  <div hidden={item.value !== value}>{item.panel}</div>
{/each}
22</div>
23
24<style>
.tabs {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tabs-list {
  display: flex;
  gap: 6px;
}

.tabs-list-item {
  --active-color: blueviolet;
  background: none;
  border: 1px solid #000;
  border-radius: 4px;
  cursor: pointer;
  padding: 6px 10px;
}

.tabs-list-item:hover {
  border-color: var(--active-color);
  color: var(--active-color);
}

.tabs-list-item--active {
  background: var(--active-color);
  border-color: var(--active-color);
  color: #fff;
}
55</style>

Solution

The active item is a local variable initialized from defaultValue or the first item. An {#each} block renders keyed buttons and panels, while class: and hidden directives derive the presentation from that one value.

Each component instance owns its state, so multiple tab sets remain independent.

Test cases

All the provided items should be displayed.
The default active item should be reflected correctly.
Selecting the tab items updates the tabpanel's contents with the active tab's panel details.
Test that you are able to initialize multiple instances of the component, each with independent states.

Accessibility

Accessibility is an important factor for making good Tabs components. The ARIA Authoring Practices Guide for Tabs has a long list of guidelines for the ARIA roles, states, and properties to add to the various elements of a tab. Tabs II and Tabs III will focus on improving the accessibility of the Tabs component.

Resources

Tabs Patterns | ARIA Authoring Practices Guide

You must be signed in to view your saved versions

Sign in

Create an account

Tabs

Requirements

Notes

Asked at these companies

Tabs (Official solution)

Solution

Test cases

Accessibility

Resources

You must be signed in to view your saved versions

Loading editor

Loading editor

Loading editor

JavaScript Console