Implementation:OpenHands OpenHands Scrollable
| Knowledge Sources | |
|---|---|
| Domains | UI_Components, React |
| Last Updated | 2026-02-11 21:00 GMT |
Overview
A container component that provides styled scrollable behavior with configurable scroll direction and type.
Description
The Scrollable component wraps its children in a container that provides controlled scrolling behavior. It accepts a mode prop (via ScrollableMode) to configure the scroll direction and a type prop (via ScrollableType) to control how scrollbars are displayed. This component standardizes scrollable regions across the application, ensuring consistent scrollbar styling and overflow handling. The source file is 52 lines long.
Usage
Use the Scrollable component to wrap content that may exceed the visible area of its container. It is appropriate for chat message lists, file trees, long forms, and any panel where content can grow beyond the allocated space.
Code Reference
Source Location
openhands-ui/components/scrollable/Scrollable.tsx (52 lines)
Signature
interface ScrollableProps {
mode?: ScrollableMode;
type?: ScrollableType;
children: React.ReactNode;
}
Import
import { Scrollable } from "@openhands/ui";
I/O Contract
Inputs (Props)
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
mode |
ScrollableMode |
No | — | Configures the scroll direction (e.g., vertical, horizontal, or both). |
type |
ScrollableType |
No | — | Controls scrollbar display behavior (e.g., always visible, auto-hide, overlay). |
Outputs
Renders a container <div> with styled overflow behavior that wraps the provided children. Scrollbars appear according to the specified type when content overflows in the direction(s) specified by mode.
Usage Examples
import { Scrollable } from "@openhands/ui";
function ChatMessageList({ messages }: { messages: string[] }) {
return (
<Scrollable mode="vertical" type="auto">
<div>
{messages.map((msg, i) => (
<div key={i}>{msg}</div>
))}
</div>
</Scrollable>
);
}