Input Group

The Input Group component joins related form controls. You can place a button after an input, a select before an input, or several controls on one line. The group adjusts the corners and borders for you.

Basic Usage

Place each control inside x-bladewind::input-group. The controls will fill the available width. Add shrink-control to a control that should keep its natural width, such as a button.

        
<x-bladewind::input-group>
    <x-bladewind::input name="search" placeholder="Search orders" />
    <x-bladewind::button class="shrink-control">Search</x-bladewind::button>
</x-bladewind::input-group>
        
    

In this example, the input grows and the Search button keeps its normal width.

Select And Input

A select can provide a unit, currency, country, or category for the value entered in the input. Add shrink-control to the select when its list does not need the full width.

        
<x-bladewind::input-group>
    <x-bladewind::select
        name="currency"
        :data="$currencies"
        class="shrink-control" />
    <x-bladewind::input
        name="amount"
        numeric="true"
        placeholder="Amount" />
</x-bladewind::input-group>
        
    

Using Three Controls

An input group can contain more than two controls. This payment example uses a currency select, an amount input, and a button.

        
<x-bladewind::input-group>
    <x-bladewind::select
        name="currency"
        :data="$currencies"
        class="shrink-control" />
    <x-bladewind::input
        name="amount"
        numeric="true"
        placeholder="Amount" />
    <x-bladewind::button class="shrink-control">Pay</x-bladewind::button>
</x-bladewind::input-group>
        
    

Email Input And Button

Use an email input when the browser should check the address format. Set can_submit="true" on the button when the group is inside a form and the button should submit it.

        
<form method="POST" action="/subscribe">
    @csrf
    <x-bladewind::input-group>
        <x-bladewind::input
            name="email"
            type="email"
            placeholder="Email address" />
        <x-bladewind::button
            can_submit="true"
            class="shrink-control">Subscribe</x-bladewind::button>
    </x-bladewind::input-group>
</form>
        
    

Phone Number With Country Code

A country code select works well with a telephone input. The type="tel" value gives mobile users a phone-friendly keyboard.

        
<x-bladewind::input-group>
    <x-bladewind::select
        name="country_code"
        :data="$countryCodes"
        class="shrink-control" />
    <x-bladewind::input
        name="phone"
        type="tel"
        placeholder="Phone number" />
</x-bladewind::input-group>
        
    

Textarea And Button

You can attach a button to a textarea. The button stretches to the height of the textarea. This layout is useful for a short message or comment form.

        
<x-bladewind::input-group>
    <x-bladewind::textarea
        name="message"
        placeholder="Write a short message"
        rows="2" />
    <x-bladewind::button class="shrink-control">Send</x-bladewind::button>
</x-bladewind::input-group>
        
    

Attached And Gapped

Controls are attached by default. Their inner corners are square and the border between them is collapsed. Set attached="false" to add a small gap. Each control will then keep all of its rounded corners.

        
<x-bladewind::input-group attached="false">
    <x-bladewind::input name="search" placeholder="Search orders" />
    <x-bladewind::button class="shrink-control">Search</x-bladewind::button>
</x-bladewind::input-group>
        
    

Supported Controls

The group supports the Bladewind input, textarea, select, and button components. It also removes the bottom margin from each child control. The group supplies one bottom margin for the full row.

Good Practices

Give every field a unique name. Use a clear placeholder or label so users know what to enter. Keep each group focused on one task. On small screens, test groups with three or more controls to make sure there is enough room.

If the group is part of a form, normal validation rules still apply to each field. The Input Group only controls the layout. It does not combine the field values or validate them.

Full List Of Attributes

The table below shows a comprehensive list of all the attributes available for the Input Group component.