Rence Material
Github

Text Fields

Text fields let users enter and edit text. Rence Material utilizes modern Material 3 states and floating labels.

User Input!

Filled style

Standard Floating

Use .form-floating for the modern Material filled look. Requires a placeholder to function.

Interactive labels!
HTML
<!-- Standard text field (Filled style) -->
<div class="form-floating mb-3">
  <input type="text" class="form-control" id="field1" placeholder="First name">
  <label for="field1">First name</label>
</div>

Outlined variant

Standard .form-control with a label above provides a persistent, clear input field.

Clean Borders!
HTML
<!-- Outlined text field -->
<div class="mb-3">
  <label for="out1" class="form-label small fw-bold text-muted">Label</label>
  <input type="text" class="form-control border rounded-2" id="out1" placeholder="Enter value">
</div>