Input

Underlined text input with a floating-label pattern (Material-ish, custom).

Empty

Name

Focused

Filled

Textarea

Message

HTML

<div class="lp-field">
  <input id="name" type="text" placeholder=" " />
  <label for="name">Name</label>
</div>

<!-- Styles: .lp-field in src/styles/components.css.
     Focus is handled by :focus-within; toggle the "filled" class with JS
     when the field has a value so the label stays risen:
       field.classList.toggle('filled', !!input.value) -->