DOCUMENTATION

Input Groups

Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.

Examples #

Place one add-on or button on either side of an input. You may also place one on both sides of an input. Remember to place <label> s outside the input group.

@
@example.com
https://example.com/users/
$ .00
@
With textarea 

<div>
    <div class="relative flex items-stretch w-full mb-3 ">
        <span
            class="flex items-center px-4 py-2 text-gray-500 border-t border-b border-l rounded whitespace-nowrap"
            id="basic-addon1">@</span>
        <input type="email"
            class="block w-full px-4 py-2  placeholder-gray-500 border outline-none focus:border-blue-400 focus:shadow "
            placeholder="Username">
    </div>
    <div class="relative flex items-stretch w-full mb-3 ">
        <input type="email"
            class="block w-full px-4 py-2  placeholder-gray-500 border rounded outline-none focus:border-blue-400 focus:shadow "
            placeholder="Recipient's username">
        <span
            class="flex items-center px-4 py-2 text-gray-500 border-t border-b border-r rounded whitespace-nowrap"
            id="basic-addon2">@example.com</span>
    </div>
    <label for="basic-url" class="inline-block mb-2 text-gray-500">Your vanity
        URL</label>
    <div class="relative flex items-stretch w-full mb-3">
        <span
            class="flex items-center px-4 py-2 text-gray-500 border-t border-b border-l rounded whitespace-nowrap"
            id="basic-addon3">https://example.com/users/</span>
        <input type="text" class="block w-full px-4 py-2  border outline-none focus:border-blue-400 focus:shadow "
            id="basic-url">
    </div>
    <div class="relative flex items-stretch w-full mb-3">
        <span
            class="flex items-center px-4 py-2 text-gray-500 border-t border-b border-l rounded-l whitespace-nowrap">$</span>
        <input type="number"
            class="block w-full px-4 py-2  border outline-none focus:border-blue-400 focus:shadow ">
        <span
            class="flex items-center px-4 py-2 text-gray-500 border-t border-b border-r rounded-r">.00</span>
    </div>
    <div class="relative flex items-stretch w-full mb-3 ">
        <span
            class="flex items-center px-4 py-2 text-gray-500 border-t border-b border-l rounded whitespace-nowrap">With
            textarea</span>
        <textarea
            class="block w-full px-4 py-2  border outline-none focus:border-blue-400 focus:shadow "></textarea>
    </div>
</div>
Previous Next
Updated on February 28, 2022
Was this page helpful?