Implementation:OpenHands OpenHands Toggle

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

Overview

A toggle switch component with customizable on/off text labels, 300ms transitions, and scale animations.

Description

The Toggle component renders a binary switch control with smooth 300ms CSS transitions and scale animations when toggling between states. It supports an optional descriptive label, and customizable onText and offText props for displaying state-specific text on or near the toggle. The component extends standard input change handling for controlled usage. The source file is 117 lines long.

Usage

Use the Toggle for binary on/off settings such as enabling/disabling features, switching between modes, or activating preferences. It provides a more visual and intuitive alternative to a checkbox for settings that represent a clear on/off state.

Code Reference

Source Location

openhands-ui/components/toggle/Toggle.tsx (117 lines)

Signature

interface ToggleProps {
  label?: ReactNode;
  onText?: string;
  offText?: string;
  checked?: boolean;
  onChange?: (checked: boolean) => void;
}

Import

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

I/O Contract

Inputs (Props)

Prop	Type	Required	Default	Description
`label`	`ReactNode`	No	—	Descriptive label rendered adjacent to the toggle switch.
`onText`	`string`	No	—	Text displayed when the toggle is in the "on" state.
`offText`	`string`	No	—	Text displayed when the toggle is in the "off" state.
`checked`	`boolean`	No	—	Whether the toggle is currently in the "on" position.
`onChange`	`(checked: boolean) => void`	No	—	Callback invoked when the toggle state changes.

Outputs

Renders a toggle switch control with 300ms CSS transitions and scale animations. Displays the appropriate on/off text based on the current state, and fires onChange when the user clicks the toggle.

Usage Examples

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

function NotificationSettings() {
  const [emailEnabled, setEmailEnabled] = useState(true);
  const [darkMode, setDarkMode] = useState(false);

  return (
    <div>
      <Toggle
        label="Email Notifications"
        onText="Enabled"
        offText="Disabled"
        checked={emailEnabled}
        onChange={setEmailEnabled}
      />
      <Toggle
        label="Dark Mode"
        onText="On"
        offText="Off"
        checked={darkMode}
        onChange={setDarkMode}
      />
    </div>
  );
}

Related Pages

Page Connections

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

Principle

Implementation

Heuristic

Environment