Renders a clickable input or an element styled as a input.
<input type="text" class="kt-input" placeholder="Example input" />
<input type="text" class="kt-input" placeholder="Example input" disabled="" />
<input type="text" class="kt-input" placeholder="Example input" readonly="" />
<input type="file" class="kt-input" />
<div class="space-y-6">
<div class="kt-input">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-mail"
aria-hidden="true"
>
<path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"></path>
<rect x="2" y="4" width="20" height="16" rx="2"></rect></svg
><input type="text" class="kt-input" placeholder="Email address" />
</div>
<div class="kt-input">
<input type="text" class="kt-input" placeholder="File name" /><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-paperclip"
aria-hidden="true"
>
<path d="M13.234 20.252 21 12.3"></path>
<path
d="m16 6-8.414 8.586a2 2 0 0 0 0 2.828 2 2 0 0 0 2.828 0l8.414-8.586a4 4 0 0 0 0-5.656 4 4 0 0 0-5.656 0l-8.415 8.585a6 6 0 1 0 8.486 8.486"
></path>
</svg>
</div>
<div class="kt-input gap-1">
<button
type="button"
class="kt-btn kt-btn-xs kt-btn-icon kt-btn-ghost -ms-0.5 size-6"
data-kt-tooltip="true"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-user"
aria-hidden="true"
>
<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path>
<circle cx="12" cy="7" r="4"></circle></svg
><span class="kt-tooltip" data-kt-tooltip-content="true"
>Loopup for user.</span
></button
><input type="text" class="kt-input" placeholder="Clickable icon button" />
</div>
<div class="kt-input">
<input
type="text"
class="kt-input"
placeholder="Clickable icon button"
/><button
type="button"
class="kt-btn kt-btn-xs kt-btn-icon kt-btn-ghost -me-1.5 size-6"
data-kt-tooltip="true"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-download"
aria-hidden="true"
>
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
<polyline points="7 10 12 15 17 10"></polyline>
<line x1="12" x2="12" y1="15" y2="3"></line></svg
><span class="kt-tooltip" data-kt-tooltip-content="true"
>Download a file.</span
>
</button>
</div>
</div>
<div class="space-y-6">
<div class="kt-input-group">
<span class="kt-input-addon">Addon</span
><input class="kt-input" type="email" placeholder="Start addon" />
</div>
<div class="kt-input-group">
<input class="kt-input" type="email" placeholder="End addon" /><span
class="kt-input-addon"
>Addon</span
>
</div>
<div class="kt-input-group">
<span class="kt-input-addon kt-input-addon-icon"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-euro"
aria-hidden="true"
>
<path d="M4 10h12"></path>
<path d="M4 14h9"></path>
<path
d="M19 6a7.7 7.7 0 0 0-5.2-2A7.9 7.9 0 0 0 6 12c0 4.4 3.5 8 7.8 8 2 0 3.8-.8 5.2-2"
></path></svg></span
><input class="kt-input" type="email" placeholder="Start icon addon" />
</div>
<div class="kt-input-group">
<input class="kt-input" type="email" placeholder="End icon addon" /><span
class="kt-input-addon kt-input-addon-icon"
><svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-ticket-percent"
aria-hidden="true"
>
<path
d="M2 9a3 3 0 1 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 1 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2Z"
></path>
<path d="M9 9h.01"></path>
<path d="m15 9-6 6"></path>
<path d="M15 15h.01"></path></svg
></span>
</div>
<div class="kt-input-group">
<div class="kt-input-addon kt-input-addon-icon">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-mail"
aria-hidden="true"
>
<path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"></path>
<rect x="2" y="4" width="20" height="16" rx="2"></rect>
</svg>
</div>
<input type="text" class="kt-input" placeholder="Email address" /><button
type="button"
class="kt-btn kt-btn-outline"
>
Button
</button>
</div>
</div>
<input
type="text"
class="kt-input"
placeholder="Example input"
aria-invalid="true"
/>
<div class="space-y-5">
<input type="text" class="kt-input kt-input-sm" placeholder="Small" /><input
type="text"
class="kt-input"
placeholder="Default"
/><input type="text" class="kt-input kt-input-lg" placeholder="Large" />
</div>
<form class="kt-form">
<div class="kt-form-item">
<label class="kt-form-label">Email address:</label>
<div class="kt-form-control">
<input type="text" class="kt-input" placeholder="Email address" />
</div>
<div class="kt-form-description">Enter your email to proceed.</div>
<div class="kt-form-message">Please enter a valid email address.</div>
</div>
<div class="kt-form-item">
<label class="kt-form-label">Password:</label>
<div class="kt-form-control">
<input
type="password"
class="kt-input"
placeholder="Password"
aria-invalid="true"
/>
</div>
<div class="kt-form-description">Enter your password to proceed.</div>
<div class="kt-form-message">Please enter a valid password.</div>
</div>
<div class="kt-form-actions">
<button type="reset" class="kt-btn kt-btn-outline">Reset</button
><button type="submit" class="kt-btn">Submit</button>
</div>
</form>