diff --git a/docs/data/material/components/tabs/tabs.md b/docs/data/material/components/tabs/tabs.md index cd1a490888958e..298aa3fabe29d2 100644 --- a/docs/data/material/components/tabs/tabs.md +++ b/docs/data/material/components/tabs/tabs.md @@ -16,16 +16,30 @@ Tabs organize and allow navigation between groups of content that are related an {{"component": "modules/components/ComponentLinkHeader.js"}} -## Basic tabs +## Introduction -A basic example with tab panels. +Tabs are implemented using a collection of related components: + +- `` - the tab element itself. Clicking on a tab displays its corresponding panel. +- `` - the container that houses the tabs. Responsible for handling focus and keyboard navigation between tabs. {{"demo": "BasicTabs.js"}} +## Basics + +```jsx +import Tabs from '@mui/material/Tabs'; +import Tab from '@mui/material/Tab'; +``` + ## Experimental API `@mui/lab` offers utility components that inject props to implement accessible tabs -following [WAI-ARIA authoring practices](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/). +following [WAI-ARIA authoring practices](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/): + +- `` - the container that houses the tabs. Responsible for handling focus and keyboard navigation between tabs. +- `` - the card that hosts the content associated with a tab. +- `` - the top-level component that wraps the Tab List and Tab Panel components. {{"demo": "LabTabs.js"}}