Surfaces
ScrollArea
A box that scrolls, with a scrollbar that looks the same everywhere.
When to reach for it
Examples
default
Notes
A box that scrolls, with a scrollbar that looks the same on every platform.
The reason to reach for this over overflow-auto is not the scrollbar — it is that Radix keeps the viewport focusable and the bar operable, which a bare overflow container does not. A scrollable region whose contents are not themselves focusable is unreachable by keyboard: there is nothing to Tab to, so everything past the fold does not exist without a mouse.
For a page-level or prose scroll, the scroll-slim utility is lighter and needs no component. This is for a bounded panel: a long option list, a log, a sidebar that outgrows its column.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| labelrequired | string | Names the region. Required, and not decoration: a scroll container is a keyboard stop, and an unnamed stop announces "group" and nothing else. | |
| orientation | 'vertical' | 'horizontal' | 'both' | 'vertical' | — |
Also accepts everything in ComponentProps<typeof ScrollAreaPrimitive.Root>. Those are forwarded to the underlying element and are not listed row by row.
Keyboard
| Key | Does |
|---|---|
| Tab | Moves focus into the region, which is what makes it scrollable at all without a mouse. |
| ↑↓Page UpPage Down | Scrolls it. |
Accessibility
- The viewport stays focusable. A scrollable region whose contents are not focusable has nothing to Tab to, so everything past the fold does not exist without a mouse.
- label is required, because an unnamed keyboard stop announces "group" and nothing else.