Guide Dear ImGui

Dear ImGui login window example (C++)

A centered sign-in window with username and password fields, "Remember me", a full-width button and an error line — plain Dear ImGui, ready to paste into your render loop.

The code

Call this every frame between ImGui::NewFrame() and ImGui::Render(). It uses fixed-size char buffers, so it needs nothing beyond Dear ImGui itself.

C++
// Login window — call every frame between ImGui::NewFrame() and ImGui::Render()
#include "imgui.h"
#include <float.h>   // FLT_MIN

static char username[64] = "";
static char password[64] = "";
static bool remember = true;
static const char* error = nullptr;

void LoginWindow()
{
    // centered on the screen, 360 px wide, height fits the content
    const ImGuiViewport* vp = ImGui::GetMainViewport();
    ImGui::SetNextWindowPos(vp->GetCenter(), ImGuiCond_Always, ImVec2(0.5f, 0.5f));
    ImGui::SetNextWindowSize(ImVec2(360.0f, 0.0f));
    ImGui::Begin("Sign in", nullptr, ImGuiWindowFlags_NoResize | ImGuiWindowFlags_NoCollapse | ImGuiWindowFlags_NoMove);

    ImGui::TextUnformatted("Username");
    ImGui::SetNextItemWidth(-FLT_MIN);                      // full width
    ImGui::InputText("##user", username, IM_ARRAYSIZE(username));

    ImGui::TextUnformatted("Password");
    ImGui::SetNextItemWidth(-FLT_MIN);
    ImGui::InputText("##pass", password, IM_ARRAYSIZE(password), ImGuiInputTextFlags_Password);

    ImGui::Checkbox("Remember me", &remember);
    ImGui::Spacing();

    if (ImGui::Button("Sign in", ImVec2(-FLT_MIN, 0.0f)))
    {
        if (!username[0] || !password[0])
            error = "Enter your username and password.";
        else
            error = nullptr;   // check the credentials here
    }
    if (error)
        ImGui::TextColored(ImVec4(0.96f, 0.36f, 0.42f, 1.0f), "%s", error);

    ImGui::End();
}

How it works

  • SetNextWindowPos(center, …, ImVec2(0.5f, 0.5f)) — the pivot of 0.5 / 0.5 puts the middle of the window on the middle of the screen.
  • SetNextWindowSize(ImVec2(360, 0)) — a height of 0 tells Dear ImGui to fit the height to the content.
  • SetNextItemWidth(-FLT_MIN) — a tiny negative width makes the next field fill the window.
  • "##user" — everything after ## is an ID only, so the field has no label next to it (the label is the text above).
  • ImGuiInputTextFlags_Password — shows dots instead of the characters.

Make it look modern

Rounded fields and buttons and a bit more padding go a long way. Push the style before Begin and pop it after End:

C++
ImGui::PushStyleVar(ImGuiStyleVar_WindowRounding, 10.0f);
ImGui::PushStyleVar(ImGuiStyleVar_FrameRounding, 6.0f);
ImGui::PushStyleVar(ImGuiStyleVar_FramePadding, ImVec2(10.0f, 8.0f));
ImGui::PushStyleVar(ImGuiStyleVar_WindowPadding, ImVec2(20.0f, 18.0f));
LoginWindow();
ImGui::PopStyleVar(4);

For colors, see the dark theme guide.

Kavro ships a ready Login form block and full loader templates (login → select → launch with a progress bar). Drop it on the canvas, restyle it, and Kavro writes the code above for you.

More guides

A custom Dear ImGui dark theme (code you can paste)Make Dear ImGui look modern: a complete dark theme with rounded corners, padding and hex colors for ImGuiStyle. Paste the function and call it once after creating the context.ImGui toggle switch and rounded buttonsHow to make an iOS-style toggle switch and rounded, colored buttons in Dear ImGui with ImDrawList and style pushes. Short C++ functions you can copy.A Dear ImGui settings menu in C# and RustThe same Dear ImGui settings window in C# with ImGui.NET and in Rust with imgui-rs: checkboxes, a slider and a button, with notes on what differs from C++.