Implementation:OpenHands OpenHands RadioGroup

Knowledge Sources	OpenHands
Domains	UI_Components, React
Last Updated	2026-02-11 21:00 GMT

Overview

A generic radio button group component that renders a list of mutually exclusive options with type-safe selection.

Description

The RadioGroup component renders a set of radio buttons from an array of IOption<T> objects. It is generic over T extends string, providing full type safety for the option values. The currently selected value is controlled by the value prop, and selection changes are reported through the onChange callback with the full option object. The source file is 49 lines long.

Usage

Use the RadioGroup when the user must select exactly one option from a small, predefined set of mutually exclusive choices. It is appropriate for settings toggles, form fields with discrete options, and configuration panels where only one selection is valid.

Code Reference

Source Location

openhands-ui/components/radio-group/RadioGroup.tsx (49 lines)

Signature

interface RadioGroupProps<T extends string> {
  options: IOption<T>[];
  value: T;
  onChange: (option: IOption<T>) => void;
}

interface IOption<T> {
  label: string;
  value: T;
}

Import

import { RadioGroup } from "@openhands/ui";

I/O Contract

Inputs (Props)

Prop	Type	Required	Default	Description
`options`	`IOption<T>[]`	Yes	—	Array of option objects, each containing a `label` and a `value`.
`value`	`T`	Yes	—	The currently selected option value.
`onChange`	`(option: IOption<T>) => void`	Yes	—	Callback invoked with the full option object when the user selects a different option.

Outputs

Renders a group of radio button inputs with labels. The radio button matching the current value is visually selected. Fires onChange when the user selects a different option.

Usage Examples

import { RadioGroup } from "@openhands/ui";
import { useState } from "react";

type Theme = "light" | "dark" | "system";

function ThemeSelector() {
  const [theme, setTheme] = useState<Theme>("system");

  const options = [
    { label: "Light", value: "light" as Theme },
    { label: "Dark", value: "dark" as Theme },
    { label: "System Default", value: "system" as Theme },
  ];

  return (
    <RadioGroup<Theme>
      options={options}
      value={theme}
      onChange={(option) => setTheme(option.value)}
    />
  );
}

Related Pages

Page Connections

Double-click a node to navigate. Hold to expand connections.

Principle

Implementation

Heuristic

Environment