navigation

Tab

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

Features

Keyboard accessible
Supports automatic activation
Themes ready

Links

Open in playground Open in Storybook View source 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

dimension

enum

'regular'

loop

boolean

true

Tab.Panel

Contains the content associated with each trigger.

PROPERTY

TYPE

DEFAULT

value*

string

label

string

symbol

enum

Accessibility

Adheres to the Tabs WAI-ARIA design pattern.

Keyboard interactions

Name	Description
`tab`	When focus moves onto the tabs, focuses the active trigger. When a trigger is focused, moves focus to the active content
`ArrowRight`	Moves focus to the next trigger and activates its associated content
`ArrowLeft`	Moves focus to the previous trigger and activates its associated content