v12.11.0


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

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

NameDescription
tabWhen focus moves onto the tabs, focuses the active trigger. When a trigger is focused, moves focus to the active content
ArrowRightMoves focus to the next trigger and activates its associated content
ArrowLeftMoves focus to the previous trigger and activates its associated content

Created by Wonderflow Design Team for Wonderflow.

© Wonderflow 2024