GroupCollect 1.3.142

Input Group

Renders a group of related inputs with a shared label, help text, and errors.

Read more Read less

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>
–

Includes taxes

Attribute Type Documentation Default Value
Required id * :string
Required label * :string
errors :list

Errors to display below the group.
[]
required :boolean false
class :any

Additional classes to add to the parent.
[]
rest :global
help :slot

Helper text appearing below the input group
Show slot attributes Hide slot attributes
icon :string

An icon name from the Icon component

 
<:help>Includes taxes</:help>
Required inner_block * :slot 
<.stack space="none">
  <.input type="money" name="budget_min" value="100" label="Minimum" placeholder="Min" label_hidden={true} />
</.stack>
<span>&ndash;</span>
<.stack space="none">
  <.input type="money" name="budget_max" value="250" label="Maximum" placeholder="Max" label_hidden={true} />
</.stack>