Forms

Field styles

text fields in six styles: underline, floating label, prefixed, search, code boxes and a counter.

new

Examples

Underline field

line draws on focus

<div class="pt-f-under">
  <input placeholder="Project name" aria-label="Project name">
</div>

Floating label

label lifts and shrinks

<div class="pt-f-float">
  <input placeholder=" " id="pt-fl-email">
  <label for="pt-fl-email">Email</label>
</div>

Prefixed box

glow ring on focus

https://

<div class="pt-f-box">
  <span>https://</span>
  <input placeholder="your-site.net" aria-label="Address">
</div>

Search with clear

clear pops in when filled

<div class="pt-f-search">
  <svg viewBox="0 0 24 24">
    <circle cx="11" cy="11" r="6.5" />
    <path d="M16 16l5 5" />
  </svg>
  <input placeholder="Search components" aria-label="Search">
  <button class="pt-clear" type="button" aria-label="Clear">✕</button>
</div>

Code boxes

lift and fill per digit

<div class="pt-pins">
  <input maxlength="1" inputmode="numeric" placeholder=" " aria-label="Digit 1">
  <input maxlength="1" inputmode="numeric" placeholder=" " aria-label="Digit 2">
  <input maxlength="1" inputmode="numeric" placeholder=" " aria-label="Digit 3">
  <input maxlength="1" inputmode="numeric" placeholder=" " aria-label="Digit 4">
</div>

Textarea counter

turns red near the limit

0 / 80

<div class="pt-f-area">
  <textarea placeholder="Write a note" maxlength="80" aria-label="Note"></textarea>
  <em>0 / 80</em>
</div>