one!

two!

three!

`})}),` `,(0,e.jsx)(n.h3,{id:"tab-variants-and-color",children:"Tab variants and color"}),` `,(0,e.jsxs)(n.p,{children:["Tabs come in 6 different variants to style the tabs: ",(0,e.jsx)(n.code,{children:"line"}),",",(0,e.jsx)(n.code,{children:"enclosed"}),`, `,(0,e.jsx)(n.code,{children:"enclosed-colored"}),", ",(0,e.jsx)(n.code,{children:"soft-rounded"}),", ",(0,e.jsx)(n.code,{children:"solid-rounded"})]}),` `,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:"language-jsx",children:` One Two

one!

two!

`})}),` `,(0,e.jsxs)(n.p,{children:[`You can also change the color scheme for any specific variant by passing the `,(0,e.jsx)(n.code,{children:"colorScheme"}),"."]}),` `,(0,e.jsxs)(n.blockquote,{children:[` `,(0,e.jsxs)(n.p,{children:["The value of ",(0,e.jsx)(n.code,{children:"colorScheme"}),` must exist in the theme object, and must be a key in `,(0,e.jsx)(n.code,{children:"theme.colors"})," that has the ",(0,e.jsx)(n.code,{children:"50"})," - ",(0,e.jsx)(n.code,{children:"900"})," color values."]}),` `]}),` `,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:"language-jsx",children:` Tab 1 Tab 2

one!

two!

`})}),` `,(0,e.jsx)(n.h3,{id:"tab-sizes",children:"Tab sizes"}),` `,(0,e.jsxs)(n.p,{children:["You can change the size of the tab by passing ",(0,e.jsx)(n.code,{children:"size"}),` prop. We support 3 sizes `,(0,e.jsx)(n.code,{children:"sm"}),", ",(0,e.jsx)(n.code,{children:"md"}),", ",(0,e.jsx)(n.code,{children:"lg"})]}),` `,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:"language-jsx",children:` One Two

one!

two!

`})}),` `,(0,e.jsx)(n.h3,{id:"changing-the-tabs-alignment",children:"Changing the tabs alignment"}),` `,(0,e.jsxs)(n.p,{children:["You can change the alignment of the ",(0,e.jsx)(n.code,{children:"TabList"})," by passing ",(0,e.jsx)(n.code,{children:"align"}),` prop. We support 3 sizes `,(0,e.jsx)(n.code,{children:"start"}),", ",(0,e.jsx)(n.code,{children:"center"}),", ",(0,e.jsx)(n.code,{children:"end"}),"."]}),` `,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:"language-jsx",children:` One Two

one!

two!

`})}),` `,(0,e.jsx)(n.h3,{id:"fitted-tabs",children:"Fitted Tabs"}),` `,(0,e.jsxs)(n.p,{children:["Stretch the tab list to fit the container by passing ",(0,e.jsx)(n.code,{children:"isFitted"})," prop."]}),` `,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:"language-jsx",children:` One Two

one!

two!

`})}),` `,(0,e.jsx)(n.h3,{id:"styling-the-tab-states-via-props",children:"Styling the tab states via props"}),` `,(0,e.jsxs)(n.p,{children:[`In event you need to create custom styles for the tabs. Simply set the variant to `,(0,e.jsx)(n.code,{children:"unstyled"}),", and use the ",(0,e.jsx)(n.code,{children:"_selected"}),", ",(0,e.jsx)(n.code,{children:"_hover"}),", ",(0,e.jsx)(n.code,{children:"_active"})," style props."]}),` `,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:"language-jsx",children:` Tab 1 Tab 2

one!

two!

`})}),` `,(0,e.jsx)(n.h3,{id:"tabs-onchange",children:"Tabs onChange"}),` `,(0,e.jsxs)(n.p,{children:["The ",(0,e.jsx)(n.code,{children:"onChange"}),` callback returns the active tab's index whenever the user changes tabs. If you intend to control the tabs programmatically, use this with the `,(0,e.jsx)(n.code,{children:"index"})," prop."]}),` `,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:"language-jsx",children:`function Example() { const colors = useColorModeValue( ['red.50', 'teal.50', 'blue.50'], ['red.900', 'teal.900', 'blue.900'], ) const [tabIndex, setTabIndex] = useState(0) const bg = colors[tabIndex] return ( setTabIndex(index)} bg={bg}> Red Teal Blue The Primary Colors Are 1, 2, 3 Red, yellow and blue. ) } `})}),` `,(0,e.jsx)(n.h3,{id:"make-a-tab-initially-active",children:"Make a tab initially active"}),` `,(0,e.jsxs)(n.p,{children:["If you want a tab to be initially active, simply pass the ",(0,e.jsx)(n.code,{children:"defaultIndex"}),` prop and set it to the index of that tab.`]}),` `,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:"language-jsx",children:`

Naruto Sasuke `})}),` `,(0,e.jsx)(n.h3,{id:"make-a-tab-disabled",children:"Make a Tab disabled"}),` `,(0,e.jsxs)(n.p,{children:["When a ",(0,e.jsx)(n.code,{children:"Tab"}),` is disabled, it is skipped during keyboard navigation and it is not clickable.`]}),` `,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:"language-jsx",children:`function Example() { return ( One Two Three 1 2 3 ) } `})}),` `,(0,e.jsx)(n.h3,{id:"tabs-with-manual-activation",children:"Tabs with manual activation"}),` `,(0,e.jsxs)(n.p,{children:["By default, ",(0,e.jsx)(n.code,{children:"Tabs"}),` are activated automatically. This means when you use the arrow keys to change tabs, the tab is activated and focused.`]}),` `,(0,e.jsxs)(n.blockquote,{children:[` `,(0,e.jsxs)(n.p,{children:["The content of a ",(0,e.jsx)(n.code,{children:"TabPanel"}),` should ideally be preloaded. However, if switching to a tab panel causes a network request and possibly a page refresh, there might be some noticeable latency and this might affect the experience for keyboard and screen reader users.`]}),` `]}),` `,(0,e.jsxs)(n.p,{children:[`In this scenario, you should use a manually activated tab, it moves focus without activating the tabs. With focus on a specific tab, users can activate a tab by pressing `,(0,e.jsx)("kbd",{children:"Space"})," or ",(0,e.jsx)("kbd",{children:"Enter"}),"."]}),` `,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:"language-jsx",children:` One Two

one!

two!

`})}),` `,(0,e.jsx)(n.h3,{id:"lazily-mounting-tab-panels",children:"Lazily mounting tab panels"}),` `,(0,e.jsxs)(n.p,{children:["By default, the ",(0,e.jsx)(n.code,{children:"Tabs"}),` component renders all tabs content to the DOM, meaning that invisible tabs are still rendered but are hidden by styles.`]}),` `,(0,e.jsxs)(n.p,{children:[`If you want to defer rendering of each tab until that tab is selected, you can use the `,(0,e.jsx)(n.code,{children:"isLazy"}),` prop. This is useful if your tabs require heavy performance, or make network calls on mount that should only happen when the component is displayed.`]}),` `,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:"language-jsx",children:` One Two {/* initially mounted */}

one!

{/* initially not mounted */}

two!

`})}),` `,(0,e.jsx)(n.h3,{id:"controlled-tabs",children:"Controlled Tabs"}),` `,(0,e.jsx)(n.p,{children:`Like form inputs, a tab's state can be controlled. Make sure to include an onChange as well, or else the tabs will not be interactive.`}),` `,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:"language-jsx",children:`function ControlledExample() { const [tabIndex, setTabIndex] = useState(0) const handleSliderChange = (event) => { setTabIndex(parseInt(event.target.value, 10)) } const handleTabsChange = (index) => { setTabIndex(index) } return ( One Two Three

Click the tabs or pull the slider around

Yeah yeah. What's up?

Oh, hello there.

) } `})}),` `,(0,e.jsx)(n.h3,{id:"creating-custom-tab-components",children:"Creating custom tab components"}),` `,(0,e.jsxs)(n.p,{children:["Because ",(0,e.jsx)(n.code,{children:"TabList"})," needs to know the order of the children, we use ",(0,e.jsx)(n.code,{children:"cloneElement"}),` to pass state internally. Your custom `,(0,e.jsx)(n.code,{children:"Tab"}),` component must use `,(0,e.jsx)(n.code,{children:"React.forwardRef"}),"."]}),` `,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:"language-jsx",children:`function CustomTabs() { const CustomTab = React.forwardRef((props, ref) => { // 1. Reuse the \`useTab\` hook const tabProps = useTab({ ...props, ref }) const isSelected = !!tabProps['aria-selected'] // 2. Hook into the Tabs \`size\`, \`variant\`, props const styles = useMultiStyleConfig('Tabs', tabProps) return ( ) }) return ( One Two 1 2 ) } `})}),` `,(0,e.jsx)(n.h3,{id:"datatabs",children:"DataTabs"}),` `,(0,e.jsx)(n.p,{children:`If you'd like to drive your tabs with an array instead of using the granular components, you can create your own DataTabs component.`}),` `,(0,e.jsx)(n.pre,{children:(0,e.jsx)(n.code,{className:"language-jsx",children:`function Example() { // 1. Create the component function DataTabs({ data }) { return ( {data.map((tab, index) => ( {tab.label} ))} {data.map((tab, index) => ( {tab.content} ))} ) } // 2. Create an array of data const tabData = [ { label: 'Nigerian Jollof', content: 'Perhaps the greatest dish ever invented.', }, { label: 'Pounded Yam & Egusi', content: 'Perhaps the surest dish ever invented but fills the stomach more than rice.', }, ] // 3. Pass the props and chill! return } `})}),` `,(0,e.jsx)(n.h2,{id:"accessibility",children:"Accessibility"}),` `,(0,e.jsx)(n.h3,{id:"keyboard",children:"Keyboard"}),` `,(0,e.jsxs)(n.table,{children:[(0,e.jsx)(n.thead,{children:(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.th,{children:"Key"}),(0,e.jsx)(n.th,{children:"Action"})]})}),(0,e.jsxs)(n.tbody,{children:[(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:(0,e.jsx)(n.code,{children:"ArrowLeft"})}),(0,e.jsx)(n.td,{children:"Moves focus to the next tab"})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:(0,e.jsx)(n.code,{children:"ArrowRight"})}),(0,e.jsx)(n.td,{children:"Moves focus to the previous tab"})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:(0,e.jsx)(n.code,{children:"Tab"})}),(0,e.jsx)(n.td,{children:"When focus moves into the tab list, places focus on the active tab element"})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsxs)(n.td,{children:[(0,e.jsx)(n.code,{children:"Space"})," or ",(0,e.jsx)(n.code,{children:"Enter"})]}),(0,e.jsx)(n.td,{children:"Activates the tab if it was not activated automatically on focus"})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:(0,e.jsx)(n.code,{children:"Home"})}),(0,e.jsx)(n.td,{children:"Moves focus to the first tab"})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:(0,e.jsx)(n.code,{children:"End"})}),(0,e.jsx)(n.td,{children:"Moves focus to the last tab"})]})]})]}),` `,(0,e.jsx)(n.h3,{id:"aria-roles",children:"ARIA roles"}),` `,(0,e.jsxs)(n.table,{children:[(0,e.jsx)(n.thead,{children:(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.th,{children:"Component"}),(0,e.jsx)(n.th,{children:"Aria"}),(0,e.jsx)(n.th,{children:"Usage"})]})}),(0,e.jsxs)(n.tbody,{children:[(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:"Tab"}),(0,e.jsx)(n.td,{children:(0,e.jsx)(n.code,{children:'role="tab"'})}),(0,e.jsx)(n.td,{children:"Indicates that it is a tab"})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{}),(0,e.jsx)(n.td,{children:(0,e.jsx)(n.code,{children:"aria-selected"})}),(0,e.jsxs)(n.td,{children:["Set to ",(0,e.jsx)(n.code,{children:"true"})," a tab is selected and all other Tabs have it set to ",(0,e.jsx)(n.code,{children:"false"})]})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{}),(0,e.jsx)(n.td,{children:(0,e.jsx)(n.code,{children:"aria-controls"})}),(0,e.jsxs)(n.td,{children:["Set to the ",(0,e.jsx)(n.code,{children:"id"})," of its associated ",(0,e.jsx)(n.code,{children:"TabPanel"})]})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:"TabList"}),(0,e.jsx)(n.td,{children:(0,e.jsx)(n.code,{children:"id"})}),(0,e.jsxs)(n.td,{children:["The ",(0,e.jsx)(n.code,{children:"id"})," of the ",(0,e.jsx)(n.code,{children:"TabPanel"})," that's referenced by its associated ",(0,e.jsx)(n.code,{children:"Tab"})]})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{}),(0,e.jsx)(n.td,{children:(0,e.jsx)(n.code,{children:"aria-orientation"})}),(0,e.jsxs)(n.td,{children:["Set to vertical or horizontal based on the value of the ",(0,e.jsx)(n.code,{children:"orientation"})," prop"]})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{}),(0,e.jsx)(n.td,{children:(0,e.jsx)(n.code,{children:'role="tablist"'})}),(0,e.jsx)(n.td,{children:"Indicates that it is a tablist"})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{children:"TabPanel"}),(0,e.jsx)(n.td,{children:(0,e.jsx)(n.code,{children:'role="tabpanel"'})}),(0,e.jsx)(n.td,{children:"Indicates that it is a tabpanel"})]}),(0,e.jsxs)(n.tr,{children:[(0,e.jsx)(n.td,{}),(0,e.jsx)(n.td,{children:(0,e.jsx)(n.code,{children:"aria-labelledby"})}),(0,e.jsxs)(n.td,{children:["Set to the ",(0,e.jsx)(n.code,{children:"id"})," of the ",(0,e.jsx)(n.code,{children:"Tab"})," that labels the ",(0,e.jsx)(n.code,{children:"TabPanel"})]})]})]})]})]})}function v(a={}){let{wrapper:n}=a.components||{};return n?(0,e.jsx)(n,Object.assign({},a,{children:(0,e.jsx)(o,a)})):o(a)}var x=v;return y(w);})(); ;return Component;

Tabs

Tabs Props#

colorScheme

defaultIndex

direction

id

index

isFitted

isLazy

isManual

lazyBehavior

onChange

orientation

size

variant

Tab Props#

id

isDisabled

isSelected

panelId

`colorScheme`

`defaultIndex`

`direction`

`id`

`index`

`isFitted`

`isLazy`

`isManual`

`lazyBehavior`

`onChange`

`orientation`

`size`

`variant`

`id`

`isDisabled`

`isSelected`

`panelId`