Implementation:OpenHands OpenHands Select

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

Overview

A dropdown select component built on react-select with custom styling, label, error handling, and generic type support.

Description

The Select component provides a fully featured dropdown selection field built on top of the react-select library with custom OpenHands styling. It is generic over T, accepting an array of IOption<T> objects. The component includes a required label, optional error and hint messages, and a configurable noOptionsText for empty states. The onChange callback provides either the selected option or null when the selection is cleared. At 138 lines, it is the largest input component in the library.

Usage

Use the Select for dropdown menus where users must choose one option from a potentially long list. It is appropriate for form fields, configuration selectors, and filter controls. For a small number of options (3-5), consider using RadioGroup instead.

Code Reference

Source Location

openhands-ui/components/select/Select.tsx (138 lines)

Signature

interface SelectProps<T> {
  label: string;
  value?: IOption<T>;
  options: IOption<T>[];
  onChange(value: IOption<T> | null): void;
  error?: string;
  hint?: string;
  noOptionsText?: string;
}

Import

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

I/O Contract

Inputs (Props)

Prop	Type	Required	Default	Description
`label`	`string`	Yes	—	The label text displayed above the select dropdown.
`value`	`IOption<T>`	No	—	The currently selected option. When undefined, the select displays in an unselected state.
`options`	`IOption<T>[]`	Yes	—	Array of option objects to populate the dropdown.
`onChange`	`(value: IOption<T> \| null) => void`	Yes	—	Callback invoked when the selection changes. Receives `null` when the selection is cleared.
`error`	`string`	No	—	Error message displayed below the select. Puts the component into an error visual state.
`hint`	`string`	No	—	Supplementary hint text displayed below the select (hidden when an error is present).
`noOptionsText`	`string`	No	—	Custom text displayed when the options list is empty.

Outputs

Renders a labeled dropdown select field using react-select with custom OpenHands styling. Displays the selected option, a searchable dropdown menu, and optional error/hint text. Fires onChange when the user selects or clears an option.

Usage Examples

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

interface Language {
  label: string;
  value: string;
}

function LanguageSelector() {
  const [selected, setSelected] = useState<Language | undefined>();

  const options: Language[] = [
    { label: "TypeScript", value: "typescript" },
    { label: "Python", value: "python" },
    { label: "Rust", value: "rust" },
    { label: "Go", value: "go" },
  ];

  return (
    <Select<string>
      label="Programming Language"
      value={selected}
      options={options}
      onChange={(option) => setSelected(option ?? undefined)}
      hint="Select your preferred language"
      noOptionsText="No languages available"
    />
  );
}

Related Pages

Page Connections

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

Principle

Implementation

Heuristic

Environment