Components
Tabs
A row of tabs for switching between views.
Tabs switches between related views. Each Tab is a choice; render the selected view yourself.
import Tabs from '@hone-ui/react/Tabs';
import Tab from '@hone-ui/react/Tab';Examples
Profile
Billing
Disabled
<Tabs value={0} aria-label="Account">
<Tab label="Profile" />
<Tab label="Billing" />
<Tab label="Disabled" disabled />
</Tabs>One
Two
<Tabs
value={1}
aria-label="Colors"
textColor="secondary"
indicatorColor="secondary"
variant="fullWidth"
>
<Tab label="One" />
<Tab label="Two" />
</Tabs>Tabs props
| Prop | Type | Default | Description |
|---|---|---|---|
value | any | The selected Tab's value, or its position. | |
onChange | (event, value) => void | Called with the event and the chosen value. | |
orientation | 'horizontal', 'vertical' | 'horizontal' | The direction of the row. |
variant | 'standard', 'scrollable', 'fullWidth' | 'standard' | How tabs fill the row. |
centered | boolean | false | Centers a standard row. |
indicatorColor | 'primary', 'secondary' | 'primary' | The indicator color. |
textColor | 'primary', 'secondary', 'inherit' | 'primary' | The selected label color. |
selectionFollowsFocus | boolean | false | Arrow keys select as they move focus. |
visibleScrollbar | boolean | false | Shows the scrollbar of a scrollable row. |
slotProps.indicator, slotProps.list | object | Props for the indicator and the tablist. | |
sx, className, style, ref | Standard. |
Tab props
| Prop | Type | Default | Description |
|---|---|---|---|
label | ReactNode | The text. | |
icon | element or string | An icon. | |
iconPosition | 'top', 'bottom', 'start', 'end' | 'top' | Where the icon sits. |
value | any | position | What Tabs selects by. |
disabled, wrapped, disableRipple | boolean | false | Turn behavior on and off. |
href | string | Makes the tab a link. |
Notes
- Tabs renders no panels. Show the view for the selected tab yourself and give it
role="tabpanel". - Scroll buttons are not supported. A scrollable row scrolls with the mouse or touch.
- Tab sets
aria-controlsonly when you pass it.
Accessibility
Name the tablist with aria-label or aria-labelledby. Arrow keys move between tabs, and
Enter or Space selects unless selectionFollowsFocus is set.