PhiaUi.Components.InputGroup (phia_ui v0.1.17)

Horizontal group of connected inputs sharing a unified border.

Provides input_group/1 — a flex container that visually joins two or more inputs (or a mix of inputs and addons) into a single compound control. Middle dividers are handled by the bordered children; the outer wrapper provides the shared focus ring and rounded corners.

When to use

Use input_group/1 to logically group related fields side by side:

First name + Last name on the same row
City + State + Zip code
Min price + Max price range
Date from + Date to
Amount + Currency unit

For prefix/suffix decorators on a single input, use input_addon/1 instead.

Basic usage

<%!-- First + Last name --%>
<.input_group label="Full name">
  <:item>
    <input type="text" name="first_name" placeholder="First" />
  </:item>
  <:item>
    <input type="text" name="last_name" placeholder="Last" />
  </:item>
</.input_group>

<%!-- Price range --%>
<.input_group label="Price range">
  <:item label="Min">
    <input type="number" name="price_min" placeholder="0" />
  </:item>
  <:item label="Max">
    <input type="number" name="price_max" placeholder="9999" />
  </:item>
</.input_group>

<%!-- City / State / Zip --%>
<.input_group>
  <:item>
    <input type="text" name="city" placeholder="City" class="flex-[2]" />
  </:item>
  <:item>
    <input type="text" name="state" placeholder="State" />
  </:item>
  <:item>
    <input type="text" name="zip" placeholder="Zip" />
  </:item>
</.input_group>

Summary

Functions

input_group(assigns)

Renders two or more inputs joined into a single compound control.

Functions

input_group(assigns)

Renders two or more inputs joined into a single compound control.

Each <:item> slot renders a child in a flex row. The outer wrapper provides:

A shared rounded border (rounded-md border border-input)
focus-within:ring-2 focus ring at the group level
Middle dividers via border-l border-input on items after the first

Items must contain a native <input> with no outer border: pass class="border-0 focus:ring-0 w-full bg-transparent ..." on the input, or use <.phia_input> stripped to its inner element.

Example

<.input_group label="Shipping address">
  <:item label="Street">
    <input type="text" name="street" placeholder="123 Main St"
           class="h-10 w-full border-0 bg-transparent px-3 text-sm focus:outline-none" />
  </:item>
  <:item label="Apt / Suite">
    <input type="text" name="apt" placeholder="Apt 4B"
           class="h-10 w-full border-0 bg-transparent px-3 text-sm focus:outline-none" />
  </:item>
</.input_group>

Attributes

label (:string) - Group-level label rendered above the connected inputs. Defaults to nil.
description (:string) - Helper text rendered below the label. Defaults to nil.
disabled (:boolean) - When true, renders the wrapper as visually disabled. Defaults to false.
class (:string) - Additional CSS classes merged into the outer wrapper. Defaults to nil.
Global attributes are accepted. HTML attributes forwarded to the wrapper element.

Slots

item (required) - Each individual input in the group. Use the :label field for per-item labels. Accepts attributes:
- label (:string) - Optional micro-label above this specific input.