Ariakit
/

Tab

Display one panel of content at a time with a tabbed interface. This component is based on the WAI-ARIA Tabs Pattern.

Open preview in a new tab
  • 🥕 Carrot
  • 🧅 Onion
  • 🥔 Potato
Edit withViteNext.js
import "./style.css";
import * as Ariakit from "@ariakit/react";
export default function Example() {
const defaultSelectedId = "default-selected-tab";
return (
<div className="wrapper">
<Ariakit.TabProvider defaultSelectedId={defaultSelectedId}>
<Ariakit.TabList className="tab-list" aria-label="Groceries">
<Ariakit.Tab className="tab">Fruits</Ariakit.Tab>
<Ariakit.Tab className="tab" id={defaultSelectedId}>
Vegetables
<Ariakit.Tab className="tab">Meat</Ariakit.Tab>
<div className="panels">
<ul>
<li>ğŸŽ Apple</li>
<li>🍇 Grape</li>
<li>🍊 Orange</li>
</ul>
<Ariakit.TabPanel tabId={defaultSelectedId}>
<ul>
<li>🥕 Carrot</li>
<li>🧅 Onion</li>
<li>🥔 Potato</li>
</ul>
<ul>
<li>🥩 Beef</li>
<li>🍗 Chicken</li>
<li>🥓 Pork</li>
</ul>
</div>
</div>
);
}

Examples

API

Follow updates

Join 1,000+ subscribers and receive monthly updates with the latest improvements on Components.

Read latest issue

No Spam. Unsubscribe at any time.