Groups an input with addons - text prefixes and suffixes, icons, buttons or keyboard hints - on a single shared field surface.

The group carries the border, radius and focus ring; any petal input placed inside is automatically stripped of its own surface, so <.input> works unchanged.

Inline addons sit beside the input via :leading and :trailing. Block addons render as full-width rows above/below via :block_start and :block_end - useful for toolbars and character counters, especially with textareas.

Examples

<.input_group>
  <:leading>https://</:leading>
  <.input type="text" name="domain" placeholder="example.com" />
</.input_group>

<.input_group>
  <:leading>$</:leading>
  <.input type="number" name="amount" placeholder="0.00" />
  <:trailing>USD</:trailing>
</.input_group>

<.input_group>
  <.input type="textarea" name="bio" />
  <:block_end class="justify-end text-xs">120/280</:block_end>
</.input_group>

Attributes

• class (:any) - CSS classes for the group container. Defaults to nil.
• Global attributes are accepted.

Slots

• leading - content rendered before the input (text, icon, button, kbd).
• trailing - content rendered after the input (text, icon, button, kbd).
• block_start - full-width row above the input. Accepts attributes:
  • class (:any)
• block_end - full-width row below the input (e.g. a character counter). Accepts attributes:
  • class (:any)
• inner_block (required) - the input itself.