Tabs

Use Tabs

Tabs is a named export of @flood-md/react. Connect the package once, then import what you use.

"use client";

import { FloodRoot, Tabs } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <Tabs label="Project sections" items={[{value:"overview",label:"Overview",content:"Project context."},{value:"activity",label:"Activity",content:"Recent updates."}]} />
    </FloodRoot>
  );
}

Design notes

• Arrow keys navigate enabled tabs; automatic activation is default, manual needs Enter/Space. Tab leaves the tablist. Horizontal direction follows RTL.
• Inactive panels remain mounted but hidden. Keep form validation and persistent selection under host control. Invalid, missing or disabled selected values fall back to the first available item.

API reference