Tabs

Pale concrete planes and three circular openings rise against a soft blue sky.

Concrete and sky

Photography · Samuel Zeller

Disable activity tab

Usage

Tabs hold related content within one task. Use links for page navigation. Arrow keys, Home, and End change the active tab; panel content remains mounted.

Exports / Tabs

Patterns

React

import { useState } from "react";
import { Tabs } from "./folio";

export function CollectionTabs() {
  const [view, setView] = useState("work");
  return <Tabs label="Collection" value={view} onChange={setView} items={[
    { value: "work", label: "Work", content: <p>Your selected work.</p> },
    { value: "notes", label: "Notes", content: <p>Your working notes.</p> },
  ]} />;
}