FREE CSS COMPONENT

Form

Always associate labels with inputs and provide useful validation feedback instead of relying on placeholder text.

Live preview

HTML

<form class="demo-form">
  <label for="email">Email</label>
  <input class="demo-input" id="email" type="email" placeholder="you@example.com">
</form>

CSS

.demo-form{display:grid;gap:12px}.demo-form label{font:600 12px Inter,sans-serif;color:#333}.demo-input{width:100%;padding:12px 14px;border:1px solid #bbb;border-radius:6px;font:14px Inter,sans-serif}.demo-input:focus{outline:2px solid #999;outline-offset:1px}