Turbine UI - Laravel and Tailwind CSS Input 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

Capture user input

x-t-input

Preview and Examples

Name

<x-turbine-ui-input
    type="text"
    placeholder="default text input"
/>
 
<x-turbine-ui-input
    type="text"
    placeholder="brand text input"
    variant="brand"
/>
 
<x-turbine-ui-input
    type="text"
    placeholder="primary text input"
    variant="primary"
/>
 
<x-turbine-ui-input
    type="text"
    placeholder="secondary text input"
    variant="secondary"
/>
 
<x-turbine-ui-input
    type="text"
    placeholder="success text input"
    variant="success"
/>
 
<x-turbine-ui-input
    type="text"
    placeholder="warning text input"
    variant="warning"
/>
 
<x-turbine-ui-input
    type="text"
    placeholder="danger text input"
    variant="danger"
/>
 
<x-turbine-ui-input
    type="text"
    placeholder="default text input with label"
    label="Name"
/>
 
<x-turbine-ui-input
    type="email"
    placeholder="default text input with label & icon"
    label="Email"
    prefix="<i class='fa-solid fa-envelope'></i>"
    divide
/>

Attributes

Name	Type	Options	Description
accent	boolean	true false	Adds an accent
border	boolean	true false	Adds a border
divide	boolean	true false	Adds a divide between elements
full	boolean	true false	Makes full width
hollow	boolean	true false	Removes background colour
label	string	string	Adds a text label
prefix	string	string	Adds content to the start
ring	boolean	true false	Adds a ring
rounded	boolean	true false	Adds rounded corners
shadow	boolean	true false	Adds a shadow
size	string	xs sm md lg xl 2xl	Controls component scale
suffix	string	string	Adds content to the end
type	string	button submit reset text email password number search url	Sets type attribute
variant	string	default brand primary secondary success warning danger light dark	A variant is like a colour palette