Scroll tabs

A horizontally scrollable, single-select tab strip. The mobile idiom for a longer set of filters or views than a SegmentedControl can hold — the active tab is marked by an accent underline, and Base UI provides the tab/tablist ARIA and arrow-key roving focus.

Example

Selected: trending

const [value, setValue] = useState('trending');
<ScrollTabs  aria-label="Top movers"  value={value}  onValueChange={setValue}  items={[    { value: 'trending', label: 'Trending' },    { value: 'favorites', label: 'Favorites' },    { value: 'gainers', label: 'Gainers' },    { value: 'losers', label: 'Losers' },    { value: 'new', label: 'New' },  ]}/>

The strip scrolls sideways when the tabs overflow, the scrollbar is hidden and discoverable by swiping. Pair with your own content region — ScrollTabsswitches the selected value only. For managed tab panels, use the desktop Tabs parts instead.

Disabled item

<ScrollTabs  aria-label="Views"  defaultValue="day"  items={[    { value: 'day', label: 'Day' },    { value: 'week', label: 'Week' },    { value: 'month', label: 'Month' },    { value: 'quarter', label: 'Quarter', disabled: true },  ]}/>

Props

Prop	Type	Default	Notes
`items`	`{ value, label, disabled? }[]`	—	The tabs. Each value must be unique.
`value / defaultValue`	`string`	—	Controlled or uncontrolled.
`onValueChange`	`(value: string) => void`	—	Fired on selection change.
`aria-label`	`string`	—	Required — names the tab list for AT.