Implementation:OpenHands OpenHands Input

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

Overview

A text input component with label, hint text, error display, and optional leading/trailing icon slots.

Description

The Input component provides a fully featured text input field with a required label, optional hint and error messages, and leading (start) and trailing (end) icon/element slots. When an error string is provided, the input displays in an error state with the error message shown below the field. The hint prop provides supplementary guidance text. The component extends standard HTML input attributes, supporting placeholder, disabled, type, and other native props. The source file is 109 lines long.

Usage

Use the Input for any single-line text entry in forms, search bars, settings panels, or filter controls. The error and hint props make it well-suited for validated form fields where user guidance and feedback are necessary.

Code Reference

Source Location

openhands-ui/components/input/Input.tsx (109 lines)

Signature

interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  label: string;
  start?: ReactElement;
  end?: ReactElement;
  error?: string;
  hint?: string;
}

Import

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

I/O Contract

Inputs (Props)

Prop	Type	Required	Default	Description
`label`	`string`	Yes	—	The label text displayed above or beside the input field.
`start`	`ReactElement`	No	—	Icon or element rendered inside the input at the leading position.
`end`	`ReactElement`	No	—	Icon or element rendered inside the input at the trailing position.
`error`	`string`	No	—	Error message displayed below the input. When provided, the input enters an error visual state.
`hint`	`string`	No	—	Supplementary hint text displayed below the input (hidden when an error is shown).

Outputs

Renders a labeled text input field with optional icon slots, and conditionally displays error or hint text beneath the field. Fires standard onChange, onBlur, and other native input events.

Usage Examples

import { Input } from "@openhands/ui";
import { SearchIcon, ClearIcon } from "@openhands/icons";
import { useState } from "react";

function SearchForm() {
  const [query, setQuery] = useState("");
  const [email, setEmail] = useState("");
  const [emailError, setEmailError] = useState<string | undefined>();

  return (
    <form>
      <Input
        label="Search"
        placeholder="Type to search..."
        start={<SearchIcon />}
        end={<ClearIcon />}
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        hint="Search across all projects"
      />
      <Input
        label="Email Address"
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        error={emailError}
        hint="We will never share your email"
      />
    </form>
  );
}

Related Pages

Page Connections

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

Principle

Implementation

Heuristic

Environment