For simplicity sake, we'll create an uncontrolled Tabs component where the state is managed within the Tabs component. During interviews, do clarify with your interviewer if they want you to implement a controlled or uncontrolled component.
Part of the complexity of building a component is designing the API for it. In the case of React, it would be the props of the component. At the bare minimum, we will need the following props:
items: A list of item objects. Each item is an object with the fields:
value: A unique identifier for the tab item.
label: The text label to show in the tab item.
panel: The contents to show in the tab panel when the item is active.
defaultValue: The default tab item/panel to show. In case the
defaultValueis not provided, we'll use the first item as the value. This is assuming that
For controlled components, there will be a
onChange props instead of a
Accessibility is a huge factor of a good Tabs component. 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 Tabs component.