Config flow UI improvements — collapsible sections, conditional fields, and native step indicator

[joohann]

Config flow UI — it's time for a proper update

I maintain Nida, a HACS-published integration for Islamic prayer times. Setting it up involves a fair amount of configuration — location, calculation method, speakers, volumes, sounds, reminders, and Ramadan-specific settings.

I've spent a significant amount of time trying to make the setup experience as clean and intuitive as possible. And I'll be honest: it's a struggle. Not because the config flow system is broken, but because it simply doesn't give developers the tools to build a good form. You're working within tight constraints that force compromises on every step.

The config flow system has received incremental improvements over the years — selectors, sections, data_description, description_placeholders — but the core interaction model hasn't meaningfully changed since it was introduced. Meanwhile, the rest of the HA frontend has evolved a lot: the automation editor, dashboard UI, device pages, and repair flows all feel modern and intentional. The config flow dialog hasn't kept pace.

This post is a call for a broader config flow UI update, with concrete proposals.

---

The core problem — no layout control

Right now, every field in a config flow step renders as a single full-width column, top to bottom. That's it. You cannot place two fields side by side, you cannot create a two-column grid, you cannot visually group related fields without wrapping them in a named section.

This severely limits how much information you can fit on a single step without it feeling like a wall of inputs. The only way to reduce visual clutter is to split into more steps — but more steps means more friction for the user.

What I'd love: a way to specify basic layout hints, such as placing fields in columns. Even a simple "columns": 2 on a section, or a "width": "half" hint on individual fields, would allow developers to build much more compact and readable forms:

"reminder_settings": section(
    vol.Schema({
        vol.Optional("minutes_before"): selector({"number": {...}}),
        vol.Optional("sound"): selector({"select": {...}}),
        vol.Optional("tts_message"): str,
        vol.Optional("language"): selector({"select": {...}}),
    }),
    {"columns": 2}  # minutes_before + sound on one row, tts + language on the next
)

This alone would reduce many multi-step flows to fewer steps without losing any information.

---

1. Collapsible sections that start collapsed

Problem
When a value can be auto-detected from HA's own config (e.g. city and country from hass.config), there is no way to hide those fields by default. Every field is always visible even when the user doesn't need to touch it. The only workaround is splitting into extra steps.

Proposed
Allow a section to start collapsed, showing a summary of its current values:

"location": section(
    vol.Schema({
        vol.Required(CONF_CITY): str,
        vol.Required(CONF_COUNTRY): str,
    }),
    {"collapsed": True, "summary": "{city}, {country}"}
)

See mockup — Feature 1: Location starts collapsed with "Amsterdam, Netherlands · auto-detected". Click to expand and override.

---

2. Conditional field visibility within a single step

Problem
All fields in a step always render, regardless of what other fields are set to. If a user picks "Sound only", they still see TTS message and language fields. The current workarounds are:

• Show all fields regardless (confusing)
• Split into extra steps (adds friction)
• Re-render the step with a different schema after submit (user has to click Next twice — poor UX)

Proposed
A depends_on key on selectors, evaluated live in the frontend:

vol.Optional("tts_message"): selector.selector({
    "text": {},
    "depends_on": {"field": "notification_type", "not_values": ["sound_only"]}
})

See mockup — Feature 2: switching the dropdown live shows/hides the relevant fields without extra steps.

---

3. Step name shown next to the progress dots

Problem
The only way to show "Step 3 of 6 — Reminders" is to hardcode it into the title field of every translation file. Add or reorder a step and you have to update every single translation manually.

See mockup — Feature 3: left shows the current workaround, right shows the proposed clean result.

---

4. Further quality-of-life improvements

• Inline validation — show field errors as the user types, not only after submit
• Dynamic step counts — when a flow skips steps, the dot count should reflect the actual remaining steps
• A review/summary step — a standard way to show all entered values before final submit
• Better mobile layout — fields that adapt gracefully to smaller screens

---

Why now?

HA has been on a strong trajectory of UI improvements — the automation editor redesign, the new dashboard system, the repair flow UI. Config flow is the first thing a new user sees when they install an integration. It deserves the same attention.

I've put a lot of work into making Nida's setup as smooth as possible within the current constraints. But the constraints themselves are the problem. Giving developers proper layout tools would mean fewer steps, less friction, and a better first impression for every integration on the platform.

HACS custom integrations are especially affected since they often have more configuration options than simple built-in integrations. But this would benefit everyone.

I'm happy to contribute to the frontend implementation if there is interest. Mockups for features 1–3 in dark and light theme are attached below.

Mockups

*Interactive mockups demonstrating all three features in dark and light theme are available here:

---

I'm happy to contribute to the frontend implementation if there's interest.

[karwosts]

1. Collapsible sections that start collapsed

Are you sure this is not already possible? It seems to be documeneted as available:

https://developers.home-assistant.io/docs/data_entry_flow_index#show-form

            vol.Required("ssl_options"): section(
                ...
                # Whether or not the section is initially collapsed (default = False)
                {"collapsed": False},
            )