This component is used when two or more inputs belong together logically — for example, a budget range (min/max), a date range, or any pair of related values that share a single label.

Child inputs should set label_hidden={true} so that only the group label is visible. The group label replaces individual input labels.

Examples

<.input_group id="budget-range" label="Budget per person">
  <:help>Includes taxes</:help>
  <.input type="money" field={@form[:budget_min]} placeholder="Min" label_hidden />
  <.input type="money" field={@form[:budget_max]} placeholder="Max" label_hidden />
</.input_group>

<.input_group id="age-range" label="Age range" errors={["Enter both values"]}>
  <.input type="number" field={@form[:age_min]} placeholder="Min" label_hidden />
  <.input type="number" field={@form[:age_max]} placeholder="Max" label_hidden />
</.input_group>

Repeated rows

When the group is one row of a repeatable list, add a :remove slot for an icon-only remove button after the inputs. Set align="start" when a child input shows help or error text below it, so the inputs and the button stay aligned along their top edge instead of drifting with the text.

<.input_group id="phone-0" label="Phone number" align="start">
  <:remove label="Remove phone number" on_click={JS.push("remove_phone", value: %{index: 0})} />
  <.input type="dropdown" field={phone[:type]} options={@types} label_hidden fit_content />
  <.input type="phone" field={phone[:number]} label_hidden />
</.input_group>