Skip to main content
‌
‌

Tab

A set of layered sections of content — known as tab panels — that are displayed one at a time.

Quick nav

Features

  • Keyboard accessible
  • Supports automatic activation
  • Themes ready

Links

View source Report an issue ARIA design ARIA authoring

Anatomy

import { Tab } from "@wonderflow/react-components";


export default () => {
  return (

    <Tab>

      <Tab.Panel value="1" label="Tab item 1">Tab panel 1</Tab.Panel>

      <Tab.Panel value="2" label="Tab item 2">Tab panel 2</Tab.Panel>

    </Tab>

  );
};

tsx

API Reference

Tab

Contains all the tabs component parts.

Property
Type
Default
defaultValue
string
onValueChange
function
dir
enum
ltr
activationMode
enum
automatic
loop
boolean
true

Tab.Panel

Contains the content associated with each trigger.

Property
Type
Default
value*
string
label
string
icon
enum

Accessibility

Adheres to the Tabs WAI-ARIA design pattern.

Keyboard interactions