Input Group
将任意表单元素水平并排连接。支持 select+input、input+button、input+input 等组合。x-input 的 prefix/suffix/append 适合单输入框自定义,此组件适合多个同级表单元素。`$c['addon']` 辅助类可将文本修饰 span 对齐到 addon 高度。
default 2 input pair (first + last name) — 同格 input を 2 つ joined
text addon — `https://` `$` `@` 等を addon class で渡す
select + input — country code + phone
input + button — search bar
size variants — sm / md / lg (child の `size` も合わせて渡すこと)
error state — label/hint が text-error
Domain not recognised
使い方
{{-- 同格 input 2 つ --}}
<x-input-group label="Full name">
<x-input name="first" placeholder="First" />
<x-input name="last" placeholder="Last" />
</x-input-group>
{{-- addon class でテキスト装飾を渡す --}}
@php $c = SparrowhawkLabs\PinionUi\Compose\InputGroupComposer::compose([]); @endphp
<x-input-group label="Website">
<span class="{{ $c['addon'] }}">https://</span>
<x-input name="url" placeholder="example.com" />
</x-input-group>
{{-- select + input --}}
<x-input-group label="Phone">
<x-select name="country">
<option value="+81">JP +81</option>
<option value="+1">US +1</option>
</x-select>
<x-input type="tel" name="phone" />
</x-input-group>
{{-- input + submit button --}}
<x-input-group>
<x-input type="search" name="q" placeholder="Search…" />
<x-button type="submit" color="primary">Go</x-button>
</x-input-group>
{{-- size — wrapper と child の両方に size を揃える --}}
<x-input-group size="sm">
<x-input size="sm" placeholder="Compact" />
<x-button size="sm">Send</x-button>
</x-input-group>