<Tab />
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.<Card padding={4}>
<TabList space={2}>
<Tab
aria-controls="content-panel"
icon={EditIcon}
id="content-tab"
label="Content"
onClick={() => setId('content')}
selected={id === 'content'}
space={2}
/>
<Tab
aria-controls="preview-panel"
icon={id === 'preview' ? EyeOpenIcon : EyeClosedIcon}
id="preview-tab"
label="Preview"
onClick={() => setId('preview')}
selected={id === 'preview'}
space={2}
/>
</TabList>
<TabPanel
aria-labelledby="content-tab"
hidden={id !== 'content'}
id="content-panel"
>
<Card border marginTop={2} padding={4} radius={2}>
<Heading>Content</Heading>
</Card>
</TabPanel>
<TabPanel
aria-labelledby="preview-tab"
hidden={id !== 'preview'}
id="preview-panel"
aria-controls: string
id: string
icon?: React.ComponentType | React.ReactNode
focused?: boolean
label?: React.ReactNode
selected?: boolean
tone?: 'default' | 'primary' | 'positive' | 'caution' | 'critical'
as?: React.ElementType | keyof JSX.IntrinsicElements
children?: React.ReactElement[]
space?: number | number[]
aria-labelledby: string
as?: React.ElementType | keyof JSX.IntrinsicElements
id: string