Input

<input type="text" class="mv-input" placeholder="Example input" />

<input type="text" class="mv-input" placeholder="Example input" disabled="" />

<input type="text" class="mv-input" placeholder="Example input" readonly="" />

<input type="file" class="mv-input" />

<div class="space-y-6">
  <div class="mv-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="mv-input" placeholder="Email address">
  </div>
  <div class="mv-input">
    <input type="text" class="mv-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="m16 6-8.414 8.586a2 2 0 0 0 2.829 2.829l8.414-8.586a4 4 0 1 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551"></path>
    </svg>
  </div>
  <div class="mv-input gap-1">
    <button type="button" class="mv-btn mv-btn-xs mv-btn-icon mv-btn-ghost -ms-0.5 size-6" data-mv-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="mv-tooltip" data-mv-tooltip-content="true">Loopup for user.</span></button><input type="text" class="mv-input" placeholder="Clickable icon button">
  </div>
  <div class="mv-input">
    <input type="text" class="mv-input" placeholder="Clickable icon button"><button type="button" class="mv-btn mv-btn-xs mv-btn-icon mv-btn-ghost -me-1.5 size-6" data-mv-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="mv-tooltip" data-mv-tooltip-content="true">Download a file.</span>
    </button>
  </div>
</div>

<div class="space-y-6">
  <div class="mv-input-group">
    <span class="mv-input-addon">Addon</span><input class="mv-input" type="email" placeholder="Start addon">
  </div>
  <div class="mv-input-group">
    <input class="mv-input" type="email" placeholder="End addon"><span class="mv-input-addon">Addon</span>
  </div>
  <div class="mv-input-group">
    <span class="mv-input-addon mv-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="mv-input" type="email" placeholder="Start icon addon">
  </div>
  <div class="mv-input-group">
    <input class="mv-input" type="email" placeholder="End icon addon"><span class="mv-input-addon mv-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="mv-input-group">
    <div class="mv-input-addon mv-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="mv-input" placeholder="Email address"><button type="button" class="mv-btn mv-btn-outline">
      Button
    </button>
  </div>
</div>

<input
  type="text"
  class="mv-input"
  placeholder="Example input"
  aria-invalid="true"
/>

<div class="space-y-5">
  <input type="text" class="mv-input mv-input-sm" placeholder="Small" /><input
    type="text"
    class="mv-input"
    placeholder="Default"
  /><input type="text" class="mv-input mv-input-lg" placeholder="Large" />
</div>

<form class="mv-form">
  <div class="mv-form-item">
    <label class="mv-form-label">Email address:</label>
    <div class="mv-form-control">
      <input type="text" class="mv-input" placeholder="Email address">
    </div>
    <div class="mv-form-description">Enter your email to proceed.</div>
    <div class="mv-form-message">Please enter a valid email address.</div>
  </div>
  <div class="mv-form-item">
    <label class="mv-form-label">Password:</label>
    <div class="mv-form-control">
      <input type="password" class="mv-input" placeholder="Password" aria-invalid="true">
    </div>
    <div class="mv-form-description">Enter your password to proceed.</div>
    <div class="mv-form-message">Please enter a valid password.</div>
  </div>
  <div class="mv-form-actions">
    <button type="reset" class="mv-btn mv-btn-outline">Reset</button><button type="submit" class="mv-btn">Submit</button>
  </div>
</form>