Tabs

The Tabs component provides a simple way to switch between multiple sections of related content using a tabbed interface.

Usage & Examples

Default

default.tsx

  const [activeTab, setActiveTab] = useState(0);
  const tabs = [
    { label: "Code", icon: FaCode, content: <div>Code content goes here.</div> },
    { label: "Music", icon: FaMusic, content: <div>Music player or list here.</div> },
    { label: "Images", icon: FaImage, content: <div>Gallery or image preview here.</div> },
  ];
  
  <Tabs
    tabs={tabs}
    defaultValue={activeTab}
    onValueChange={setActiveTab}
    theme="primary"
    size="medium"
  />

Props API

19 props
Columns
Tabs props API
Default
Description
aria-describedbystringNoaria—Accessible description id for the tablist.
aria-labelstringNoaria"Tabs"Accessible name for the tablist.
aria-labelledbystringNoaria—Accessible labelledby id for the tablist. Preferred over aria-label when provided.
aria-live"off" | "polite" | "assertive"Noaria—Optional aria-live setting if tab changes should be announced by a related region.
classNamestringNostyling—Custom class names to apply to the tabs container.
data-testidstringNotesting—Backward-compatible alias for test ID attributes.
defaultValuenumberNoprops0Uncontrolled initial index.
idBasestringNoprops—Optional stable base used to create ids: `${idBase}-tab-${i}` and `${idBase}-panel-${i}`
onValueChange((index: number) => void)Noevents—Callback when the active tab changes.
roundingRoundingTypeNostylingconfigured default rounding (fallback: "medium")Rounding of the tabs. "none" | "small" | "medium" | "large" | "full"
shadowShadowTypeNostyling—Shadow style of the tabs. "none" | "light" | "medium" | "strong" | "intense"
sizeSizeTypeNostylingconfigured default size (fallback: "medium")Size of the tabs. "xs" | "small" | "medium" | "large" | "xl"