Early access. Read the blog post

Tabs is a classic UI navigation pattern for dividing related content and interactions.

The usage of aria attributes is important in order for people using screen readers to get a good experience. When using TypeScript, Sanity UI enforces the usage of the correct aria attributes.

Usage  

Tab  

Properties  

aria-controls: string
id: string
icon?: React.ComponentType | React.ReactNode
focused?: boolean
label?: React.ReactNode
selected?: boolean

TabList  

Properties  

as?: React.ElementType | keyof JSX.IntrinsicElements
children?: React.ReactElement[]
space?: number | number[]

TabPanel  

Properties  

aria-labelledby: string
as?: React.ElementType | keyof JSX.IntrinsicElements
id: string
Updated 2w ago
By
the platform for structured content