Implementation:OpenHands OpenHands InteractiveChip
| Knowledge Sources | |
|---|---|
| Domains | UI_Components, React |
| Last Updated | 2026-02-11 21:00 GMT |
Overview
A clickable chip component with leading/trailing icon slots and two visual styles: elevated and filled.
Description
The InteractiveChip component extends the concept of a static Chip by adding interactivity. It supports click handlers, optional start and end icon/element slots, and two visual styles via the chipType prop: "elevated" (with shadow) and "filled" (solid background). This makes it suitable for filter tags, selectable options, and dismissible labels. The source file is 67 lines long.
Usage
Use the InteractiveChip when a chip-like element needs to respond to user interaction, such as toggling a filter, selecting a tag, or dismissing a label. For static, read-only labels, use the Chip component instead.
Code Reference
Source Location
openhands-ui/components/interactive-chip/InteractiveChip.tsx (67 lines)
Signature
interface InteractiveChipProps {
chipType?: InteractiveChipType;
start?: ReactElement;
end?: ReactElement;
children: React.ReactNode;
onClick?: () => void;
}
type InteractiveChipType = "elevated" | "filled";
Import
import { InteractiveChip } from "@openhands/ui";
I/O Contract
Inputs (Props)
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
chipType |
InteractiveChipType ("elevated" | "filled") |
No | "filled" |
Visual style of the chip: elevated adds a shadow, filled uses a solid background. |
start |
ReactElement |
No | — | Icon or element rendered before the chip label. |
end |
ReactElement |
No | — | Icon or element rendered after the chip label (commonly a close/dismiss icon). |
Outputs
Renders a clickable chip element with optional leading and trailing icons. Fires onClick when the user interacts with the chip.
Usage Examples
import { InteractiveChip } from "@openhands/ui";
import { CloseIcon, TagIcon } from "@openhands/icons";
function FilterBar() {
const filters = ["React", "TypeScript", "Python"];
return (
<div>
{filters.map((filter) => (
<InteractiveChip
key={filter}
chipType="elevated"
start={<TagIcon />}
end={<CloseIcon />}
onClick={() => console.log(`Remove filter: ${filter}`)}
>
{filter}
</InteractiveChip>
))}
</div>
);
}