# Input Group

Group inputs with text, buttons, icons, and more.

- Install: `php artisan blatui:add input-group`
- Source: https://blatui.remix-it.com/r/input-group.json
- Composer: `composer require gehrisandro/tailwind-merge-laravel`

## resources/views/components/ui/input-group.blade.php

```blade
<div
    data-slot="input-group"
    role="group"
    {{ $attributes->twMerge("group/input-group border-input dark:bg-input/30 relative flex w-full items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none h-9 min-w-0 has-[>textarea]:h-auto has-[>[data-align=inline-start]]:[&>input]:pl-2 has-[>[data-align=inline-end]]:[&>input]:pr-2 has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]") }}
>
    {{ $slot }}
</div>
```

## resources/views/components/ui/input-group-addon.blade.php

```blade
@props(['align' => 'inline-start'])

@php
    $aligns = [
        'inline-start' => 'order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]',
        'inline-end' => 'order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]',
        'block-start' => 'order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5',
        'block-end' => 'order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5',
    ];
@endphp

<div
    data-slot="input-group-addon"
    data-align="{{ $align }}"
    {{ $attributes->twMerge("text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-[calc(var(--radius)-5px)] ".($aligns[$align] ?? $aligns['inline-start'])) }}
>
    {{ $slot }}
</div>
```

## resources/views/components/ui/input-group-button.blade.php

```blade
@props([
    'size' => 'xs',
    'variant' => 'ghost',
    'type' => 'button',
])

@php
    $base = "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-ring/50 focus-visible:ring-[3px]";
    $variants = [
        'ghost' => 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
        'outline' => 'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
        'default' => 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',
    ];
    $sizes = [
        'xs' => 'h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] has-[>svg]:px-2 text-xs',
        'sm' => 'h-8 gap-1.5 px-2.5 has-[>svg]:px-2.5',
        'icon-xs' => 'size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0',
        'icon-sm' => 'size-8 p-0 has-[>svg]:p-0',
    ];
    $classes = $base.' '.($variants[$variant] ?? $variants['ghost']).' '.($sizes[$size] ?? $sizes['xs']);
@endphp

<button type="{{ $type }}" data-slot="input-group-button" {{ $attributes->twMerge($classes) }}>
    {{ $slot }}
</button>
```

## resources/views/components/ui/input-group-input.blade.php

```blade
@props(['type' => 'text'])

<input
    type="{{ $type }}"
    data-slot="input-group-control"
    {{ $attributes->twMerge('flex-1 w-full min-w-0 rounded-none border-0 bg-transparent px-3 py-1 text-base shadow-none outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 md:text-sm') }}
>
```

## resources/views/components/ui/input-group-text.blade.php

```blade
<span data-slot="input-group-text" {{ $attributes->twMerge("text-muted-foreground flex items-center gap-2 text-sm [&_svg:not([class*='size-'])]:size-4") }}>
    {{ $slot }}
</span>
```