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"
    >
      <rect width="20" height="16" x="2" y="4" rx="2"></rect>
      <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path></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"
    >
      <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"
      >
        <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"
      >
        <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>

<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>