# Common ImGui Widgets and Their Usage: A Complete Guide to Dear ImGui UI Elements

> Explore common ImGui widgets and their usage in this comprehensive guide. Learn about buttons, checkboxes, sliders, and more to build your Dear ImGui UI.

- Repository: [omar/imgui](https://github.com/ocornut/imgui)
- Tags: how-to-guide
- Published: 2026-07-13

---

**Dear ImGui provides a comprehensive set of immediate-mode widgets—including buttons, checkboxes, radio buttons, sliders, text inputs, and color editors—implemented in [`imgui_widgets.cpp`](https://github.com/ocornut/imgui/blob/main/imgui_widgets.cpp) using a standard four-stage pipeline of ID generation, layout calculation, interaction handling via `ButtonBehavior`, and rendering.**

The open-source library Dear ImGui (ocornut/imgui) offers a robust collection of immediate-mode graphical user interface elements designed for debugging tools and internal development panels. Understanding the common ImGui widgets and their usage patterns is essential for building efficient tool UIs that integrate seamlessly with your application. These widgets share a unified architecture in [`imgui_widgets.cpp`](https://github.com/ocornut/imgui/blob/main/imgui_widgets.cpp) that handles input, state management, and rendering through a consistent API surface.

## Core Widget Architecture in Dear ImGui

Every widget in the ImGui library follows a standardized execution flow that ensures consistent behavior and interaction handling. This architecture is implemented in [`imgui_widgets.cpp`](https://github.com/ocornut/imgui/blob/main/imgui_widgets.cpp) and consists of four critical stages:

1. **ID Generation** – Each widget calls `window->GetID(label)` (or uses a supplied string) to obtain a unique `ImGuiID` used for tracking interaction state across frames. This occurs at lines 94-97 in [`imgui_widgets.cpp`](https://github.com/ocornut/imgui/blob/main/imgui_widgets.cpp).
2. **Item Layout** – The widget calculates its size using `CalcItemSize` and reserves space via `ItemSize`. It then creates an `ImRect` (`bb`) representing the clickable region (lines 98-105).
3. **Interaction Handling** – The core function `ButtonBehavior` determines whether the item is hovered, held, or pressed, using the generated ID and the bounding rectangle (lines 84-86).
4. **Rendering** – After determining interaction results, each widget renders its visual representation using the current style and color settings (lines 112-118).

This pipeline ensures that all common ImGui widgets behave predictably while maintaining the library's immediate-mode philosophy.

## Essential ImGui Widgets and Code Examples

The following sections cover the most frequently used widgets in the Dear ImGui library, including their typical API signatures and minimal implementation examples. All examples assume an active ImGui frame initiated with `ImGui::Begin`.

### Button Widgets and Interactive Elements

**Button** is the fundamental clickable widget used to trigger actions. It returns `true` when clicked during the current frame.

```cpp
if (ImGui::Button("Save")) {
    // Trigger save action
}

```

**SmallButton** provides a compact alternative that fits inline with text, implemented in [`imgui_widgets.cpp`](https://github.com/ocornut/imgui/blob/main/imgui_widgets.cpp) (lines 334-342).

```cpp
ImGui::Text("Options:"); ImGui::SameLine();
if (ImGui::SmallButton("Reset")) Reset();

```

**InvisibleButton** creates a clickable area without visual appearance, useful for custom drawing or drag handles (lines 444-464).

```cpp
ImGui::InvisibleButton("##drag", ImVec2(200,20));
if (ImGui::IsItemActive()) {
    // Handle drag logic
}

```

### Boolean and Selection Inputs

**Checkbox** toggles a boolean value and is implemented in [`imgui_widgets.cpp`](https://github.com/ocornut/imgui/blob/main/imgui_widgets.cpp) (lines 1242-1249).

```cpp
static bool show_grid = true;
ImGui::Checkbox("Show grid", &show_grid);

```

**CheckboxFlags** manipulates bit-flags using checkbox interactions, supporting `int`, `unsigned`, `ImS64`, and `ImU64` types (lines 1346-1363).

```cpp
int flags = 0;
ImGui::CheckboxFlags("Enable Debug", &flags, ImGuiConfigFlags_DebugLog);

```

**RadioButton** selects one item among many options, returning `true` when the button becomes active (lines 1366-1375).

```cpp
static int mode = 0;
ImGui::RadioButton("Copy", &mode, 0);
ImGui::SameLine(); ImGui::RadioButton("Move", &mode, 1);

```

### Numeric Input Widgets

**SliderFloat** and **SliderInt** allow drag-to-adjust scalar values within a defined range using a visible track (lines 1439-1452).

```cpp
static float speed = 1.0f;
ImGui::SliderFloat("Speed", &speed, 0.0f, 10.0f);

```

**DragFloat** and **DragInt** provide similar functionality without the visible track, offering precise numeric entry suitable for values requiring fine adjustment (lines 1459-1472).

```cpp
static float angle = 0.0f;
ImGui::DragFloat("Angle", &angle, 0.1f);

```

### Text Input Fields

**InputText** creates an editable single-line text field (lines 1669-1680).

```cpp
static char name[64] = "";
ImGui::InputText("Name", name, IM_ARRAYSIZE(name));

```

**InputTextMultiline** provides a multi-line text editor with configurable size (lines 1700-1712).

```cpp
static char notes[256] = "";
ImGui::InputTextMultiline("Notes", notes, IM_ARRAYSIZE(notes), ImVec2(0,100));

```

### Selection and List Widgets

**Combo** creates a drop-down selection list using the `BeginCombo`/`EndCombo` pattern (lines 1786-1804).

```cpp
static int current = 0;
const char* items[] = {"One","Two","Three"};
if (ImGui::BeginCombo("##combo", items[current])) {
    for (int i=0; i<3; i++)
        if (ImGui::Selectable(items[i], i==current))
            current=i;
    ImGui::EndCombo();
}

```

**Selectable** represents individual selectable rows, often used within tables or lists (lines 2035-2048).

```cpp
static int selected = -1;
for (int i=0; i<5; i++)
    if (ImGui::Selectable(name[i], selected==i))
        selected = i;

```

**ListBox** provides a scrollable list with optional selection handling (lines 2080-2094).

```cpp
static int cur = 0;
const char* fruits[] = {"Apple","Banana","Cherry"};
ImGui::ListBox("Fruits", &cur, fruits, IM_ARRAYSIZE(fruits));

```

### Visual and Data Display Widgets

**ColorEdit3** and **ColorEdit4** provide inline color pickers for RGB and RGBA values respectively (lines 1840-1855).

```cpp
static float col[3] = {1.0f, 0.0f, 0.0f};
ImGui::ColorEdit3("Tint", col);

```

**Image** and **ImageButton** display textures with optional interaction (lines 1900-1911).

```cpp
ImGui::Image(my_texture, ImVec2(64,64));
if (ImGui::ImageButton(my_texture, ImVec2(32,32)))
    OpenSettings();

```

**ProgressBar** displays scalar progress between 0 and 1 (lines 1955-1967).

```cpp
ImGui::ProgressBar(downloaded/total_size, ImVec2(0,0), "Downloading…");

```

**PlotLines** and **PlotHistogram** render quick inline visualizations of data series (lines 2120-2135).

```cpp
float data[100];
// Fill data array...
ImGui::PlotLines("Signal", data, 100);

```

### Container and Layout Widgets

**TreeNode** and **CollapsingHeader** create hierarchical containers that expand and collapse (lines 2000-2009).

```cpp
if (ImGui::TreeNode("Settings")) {
    ImGui::Checkbox("VSync", &vsync);
    ImGui::TreePop();
}

```

**Bullet** renders a small dot used for list items (lines 1975-1982).

```cpp
ImGui::Bullet(); ImGui::SameLine(); ImGui::Text("First item");

```

## Key Implementation Files

Understanding the source structure of Dear ImGui helps when debugging or extending widget functionality:

- **[`imgui.h`](https://github.com/ocornut/imgui/blob/main/imgui.h)** – Contains public API declarations and widget function signatures.
- **[`imgui_internal.h`](https://github.com/ocornut/imgui/blob/main/imgui_internal.h)** – Provides internal helpers including `ButtonBehavior`, `CalcItemSize`, and `ItemAdd` used by all widgets.
- **[`imgui_widgets.cpp`](https://github.com/ocornut/imgui/blob/main/imgui_widgets.cpp)** – Houses the core widget implementations including Button, Checkbox, Slider, InputText, and Combo.
- **[`imgui_draw.cpp`](https://github.com/ocornut/imgui/blob/main/imgui_draw.cpp)** – Contains low-level rendering primitives for frames, arrows, and bullets.
- **[`imgui_demo.cpp`](https://github.com/ocornut/imgui/blob/main/imgui_demo.cpp)** – Offers comprehensive live demonstrations showing usage patterns for every common widget.

## Summary

- **Common ImGui widgets** follow a standardized four-stage architecture: ID generation via `GetID`, layout calculation using `CalcItemSize`, interaction detection through `ButtonBehavior`, and final rendering.
- **Button variants** include standard `Button`, compact `SmallButton`, and invisible `InvisibleButton` for custom interactions.
- **Input widgets** range from boolean checkboxes and radio buttons to numeric sliders, drag controls, and text input fields.
- **Selection widgets** like `Combo`, `Selectable`, and `ListBox` manage choice states with immediate-mode patterns.
- **Specialized widgets** such as `ColorEdit`, `Image`, `ProgressBar`, and `PlotLines` handle data visualization and media display.
- All widgets are implemented in [`imgui_widgets.cpp`](https://github.com/ocornut/imgui/blob/main/imgui_widgets.cpp) and integrate with the internal state management system through unique IDs and bounding rectangles.

## Frequently Asked Questions

### What is the difference between SliderFloat and DragFloat in ImGui?

**SliderFloat** renders a visible track that users can click and drag to set values within a range, while **DragFloat** provides a drag-anywhere interaction without the visual track, making it better suited for precise numeric entry or values without strict bounds. Both are implemented in [`imgui_widgets.cpp`](https://github.com/ocornut/imgui/blob/main/imgui_widgets.cpp) and follow the same underlying architecture but differ in their visual presentation and default interaction sensitivity.

### How does ImGui track widget state across frames?

Dear ImGui uses a **hash-based ID system** where each widget generates a unique `ImGuiID` by calling `window->GetID(label)` with its label or an explicit ID string. This ID is used by `ButtonBehavior` and other internal functions to track hover states, active states, and keyboard focus persistently across frames. The ID is computed from the current window ID stack combined with the widget's label as implemented in [`imgui_widgets.cpp`](https://github.com/ocornut/imgui/blob/main/imgui_widgets.cpp) (lines 94-97).

### Can I create custom widgets using Dear ImGui's internal functions?

Yes, you can build **custom widgets** by following the standard widget flow: generate an ID using `GetID`, create a bounding `ImRect`, call `ButtonBehavior` to handle interactions, and then render using the `ImDrawList` API. This approach ensures your custom widgets integrate seamlessly with ImGui's state handling, styling system, and input processing, as demonstrated by the native implementations in [`imgui_widgets.cpp`](https://github.com/ocornut/imgui/blob/main/imgui_widgets.cpp).

### What is the purpose of the invisible button widget?

**InvisibleButton** creates a clickable hit-testing area without rendering any visual elements, making it ideal for implementing custom-drawn elements, drag handles, or interactive overlays where you want to handle input through ImGui's standard interaction system while providing your own visual representation. It uses the same `ButtonBehavior` function as visible buttons but skips the rendering phase.