Input Group

# Brok UI: Input Group (`input-group`)

Attaches icons, text, buttons, or a clear control to an input within a single bordered group. The input forwards wire:model unchanged, so a debounced Livewire search is an icon addon, an input and a clear button.

Brok UI is a Laravel Blade component registry. Installed components are plain Blade files the app owns.

## Install

```bash
php artisan ui:add input-group
```

## Usage

```blade
<x-ui.input-group>
    <x-ui.input-group.addon>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
            <circle cx="11" cy="11" r="8" />
            <path d="m21 21-4.3-4.3" />
        </svg>
    </x-ui.input-group.addon>

    <x-ui.input-group.input placeholder="{{ __('Search...') }}" />

    <x-ui.input-group.addon align="inline-end">
        <x-ui.input-group.button>{{ __('Go') }}</x-ui.input-group.button>
    </x-ui.input-group.addon>
</x-ui.input-group>
```

## Props

- `align` (inline-start|inline-end, default `inline-start`) — Documented catalog control used by the preview workbench.

## Use when

- Use when users must enter freeform information that cannot be reliably selected from a list.
- Attaching an icon, prefix/suffix text, a button or a clear control to an input inside one bordered box.
- Building a search field: icon addon, input and a clear button that share a single focus ring.

## Avoid when

- Do not choose a freeform field when a constrained choice would reduce errors or cognitive load.
- Attaching whole separate controls side by side rather than decorating one input; use button-group instead.
- A plain input with no addon; use input on its own.

## Anti-patterns

- Using freeform entry for a bounded answer set

## Rules

- Use the `<brok:input-group>` tag (or `<x-ui.input-group>`) in Blade; do not rewrite the component.
- Prefer the documented props and variants over utility-class overrides; when a utility must win, use the `!` important modifier.
- Use semantic design tokens (`bg-primary`, `text-muted-foreground`), never raw colour utilities.
- Keep the `data-slot` attributes; they are the styling and test hooks.

## Links

- Docs: https://brokui.dev/docs/components/input-group
- Registry JSON (files, props, contract): https://brokui.dev/r/open/input-group.json

{{--
    Clears the group's input. Dispatches real `input` and `change` events so
    `x-model` and Livewire's `wire:model` (with any `.live.debounce` modifier)
    see the change exactly as if the user had deleted the text, then returns
    focus to the input. Hidden while the input shows its placeholder (a CSS
    `:has()` rule, so it also follows a server-side reset with no JS state to
    drift); give the input a placeholder for the hide to apply.
--}}
<button
    type="button"
    data-slot="input-group-clear"
    x-data
    x-on:click="
        const input = $el.closest('[data-slot=input-group]')?.querySelector('[data-slot=input-group-input]');
        if (!input) return;
        input.value = '';
        input.dispatchEvent(new Event('input', { bubbles: true }));
        input.dispatchEvent(new Event('change', { bubbles: true }));
        input.focus();
    "
    aria-label="{{ __('Clear') }}"
    {{ $attributes->merge(['class' => 'order-last inline-flex size-7 shrink-0 items-center justify-center rounded-sm text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-[length:var(--ring-width)] focus-visible:ring-ring motion-reduce:transition-none [[data-slot=input-group]:has([data-slot=input-group-input]:placeholder-shown)_&]:hidden']) }}
>
    <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-4">
        <path d="M18 6 6 18M6 6l12 12" />
    </svg>
</button>