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="M12 15V3"></path>
        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
        <path d="m7 10 5 5 5-5"></path></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>