Turbine UI - Laravel and Tailwind CSS Input Group Component

Alert Avatar Badge Burger Button Button Group Card Code Container Dropdown F A Q Grid Heading Input Input Group Label Link List Group Media Menu Modal Nav Link Navbar Progress Section Select Sidebar Stat Table Text Textarea Theme Switcher Toast Toggle

Input Group

Groups related inputs together

x-t-input-group

Preview and Examples

Title

First Name

Second Name

Password

<x-turbine-ui-input-group
    cols="3"
    gap
>
    <x-turbine-ui-select
        label="Title"
        prefix="<i class='fa-solid fa-id-card'></i>"
    >
        <option value="dr">Dr</option>
        <option value="mr">Mr</option>
        <option value="mrs">Mrs</option>
        <option value="master">Master</option>
        <option value="miss">Miss</option>
    </x-turbine-ui-select>
    <x-turbine-ui-input
        label="First Name"
        type="text"
        placeholder="Bob"
        prefix="<i class='fa-solid fa-user'></i>"
    />
    <x-turbine-ui-input
        label="Second Name"
        type="text"
        placeholder="Smith"
        prefix="<i class='fa-solid fa-user'></i>"
    />
</x-turbine-ui-input-group>
 
<x-turbine-ui-input-group
    grid="2"
    gap
>
    <x-turbine-ui-input
        label="Email"
        type="email"
        placeholder="bob@example.com"
        prefix="<i class='fa-solid fa-envelope'></i>"
    />
    <x-turbine-ui-input
        label="Password"
        type="password"
        placeholder="min 8 characters"
        prefix="<i class='fa-solid fa-lock'></i>"
    />
</x-turbine-ui-input-group>

Attributes

Name	Type	Options	Description
accent	boolean	true false	Adds an accent
border	boolean	true false	Adds a border
cols	string	1 2 3 4 5 6 12	Sets column count
gap	string	none xs sm md lg xl 2xl	Adds a gap
gradient	boolean	true false	Adds a gradient
hollow	boolean	true false	Removes background colour
ring	boolean	true false	Adds a ring
rounded	boolean	true false	Adds rounded corners
rows	string	1 2 3 4 5 6	Sets row count
shadow	boolean	true false	Adds a shadow
size	string	xs sm md lg xl 2xl	Controls component scale
variant	string	default brand primary secondary success warning danger light dark	A variant is like a colour palette