🚧 This website is work in progress 👷
Components
Structure
Tabs
Published

Tabs

Tab

Editable Example

import {} from "@wfp/react";

() => {
  return <ad label="Tab 1" selected />;
};
PropDefaultDescriptionValue

handleTabClick

(index?: number,label?: ReactNode,evt?: ChangeEvent<HTMLInputElement>) => void
–

Optional callback for when a tab is clicked. Provides the index, label, and event details. @functionality

handleTabAnchorFocus

(index?: number) => void
–

Optional callback for when a tab gains focus. Provides the index of the focused tab. @functionality

handleTabKeyDown

(index?: number,label?: ReactNode,evt?: ChangeEvent<HTMLInputElement>) => void
–

Optional callback for when a keydown event occurs on a tab. Provides the index, label, and event details. @functionality

href

string
–

Href for the tab, useful when each tab is associated with a different URL. @navigation

index

number
–

Index of the tab within the Tabs component. @navigation

label

ReactNode
–

Content to be displayed as the label of the tab. Can be a string or React node. @content

role

string
–

ARIA role for the tab element, often set to 'tab'. @accessibility

selected

boolean
–

Indicates whether the tab is currently selected. @state

tabIndex

number
–

TabIndex for the tab, useful for accessibility and keyboard navigation. @accessibility

renderAnchor

(props?: object) => ReactNode
–

Optional custom renderer for the anchor element within the tab. @render

renderContent

() => ReactNode
–

Optional custom renderer for the content of the tab. @render

renderListElement

ReactNode |((props?: object) => ReactNode)
–

Optional custom renderer for the list element of the tab. @render

className

string
–

Optional CSS class to apply to the tab. Allows for additional styling. @style

disabled

boolean
–

Indicates whether the tab is disabled. @state

components

–

Optional components to replace default elements of the Tab, such as the Tab itself. @customization

On this page