<section class="demo-section">
  <h2>Inputs</h2>

  <h3>Sizes</h3>
  <div class="demo-row">
    <div class="form-group">
      <label class="label">Large input
        <input class="input input-lg" placeholder="Placeholder text" />
      </label>
    </div>
    <div class="form-group">
      <label class="label">Medium input
        <input class="input" placeholder="Placeholder text" />
      </label>
    </div>
    <div class="form-group">
      <label class="label">Small input
        <input class="input input-sm" placeholder="Placeholder text" />
      </label>
    </div>
  </div>

  <h3>With icon</h3>
  <div class="demo-row">
    <div class="form-group">
      <label class="label">
        Search
        <span class="vmk-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11 19C15.4183 19 19 15.4183 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11C3 15.4183 6.58172 19 11 19Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M21 21L16.65 16.65" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
        <input class="input input-icon-left" placeholder="Search..." />
      </label>
    </div>
  </div>

  <h3>States</h3>
  <div class="demo-row">
    <div class="form-group error">
      <label class="label">Error
        <input class="input" value="Invalid value" />
      </label>
      <p class="input-help is-error">This field has an error.</p>
    </div>
    <div class="form-group success">
      <label class="label">Success
        <input class="input" value="Valid value" />
      </label>
      <p class="input-help is-success">Looks good.</p>
    </div>
    <div class="form-group warning">
      <label class="label">Warning
        <input class="input" value="Maybe check this" />
      </label>
      <p class="input-help is-warning">Please review.</p>
    </div>
  </div>

  <h3>Disabled</h3>
  <div class="demo-row">
    <div class="form-group">
      <label class="label">Disabled
        <input class="input" value="Can’t edit" disabled />
      </label>
    </div>
  </div>
</section>