Rence Material
Github

Forms

Combine inputs, selection controls, and buttons into cohesive, user-friendly Material Design 3 form layouts.

Structured Data Entry!

Material 3 Form Layout

Clean & Focused
Get in Touch

Build beautiful forms by combining .bg-light inputs with .rounded-4 cards and primary buttons.

Seamless Design!
HTML
<!-- Material 3 Form Layout -->
<form class="card p-4 shadow-sm border-0 rounded-4">
  <h5 class="mb-4">Contact Us</h5>
  
  <div class="row g-3">
    <div class="col-md-6 mb-3">
      <label class="form-label text-primary small fw-bold">First Name</label>
      <input type="text" class="form-control" placeholder="John">
    </div>
    <div class="col-md-6 mb-3">
      <label class="form-label text-primary small fw-bold">Last Name</label>
      <input type="text" class="form-control" placeholder="Doe">
    </div>
    
    <div class="col-12 mb-3">
      <label class="form-label text-primary small fw-bold">Email</label>
      <input type="email" class="form-control" placeholder="john.doe@example.com">
    </div>
    
    <div class="col-12 mb-4">
      <label class="form-label text-primary small fw-bold">Message</label>
      <textarea class="form-control" rows="4"></textarea>
    </div>
    
    <div class="col-12 text-end">
      <button type="submit" class="btn btn-primary px-5 rounded-pill">SEND</button>
    </div>
  </div>
</form>