An accessible horizontal or vertical tab list with roving keyboard focus (arrow keys, Home/End) for switching between panels of content.
"use client";
import Tabs from "@/components/ui/tabs";
import { useState } from "react";
export default function TabsDemo() {
const [selected, setSelected] = useState<"overview" | "disabled" | "details">(
"overview",
);
return (
<div className="flex min-h-[280px] w-full items-center justify-center bg-background p-8">
<div className="w-full max-w-sm">
<Tabs
ariaLabel="View"
size="sm"
value={selected}
onChange={setSelected}
items={[
{
value: "overview",
label: "Overview",
id: "demo-tab-overview",
panelId: "demo-panel-overview",
},
{ value: "disabled", label: "Disabled", disabled: true },
{
value: "details",
label: "Details",
id: "demo-tab-details",
panelId: "demo-panel-details",
},
]}
/>
<div
role="tabpanel"
id={`demo-panel-${selected}`}
aria-labelledby={`demo-tab-${selected}`}
tabIndex={0}
className="mt-3 px-1 text-sm text-foreground"
>
{selected === "overview" ? "Overview" : "Details"}
</div>
</div>
</div>
);
}
