Input

Plain <input class="sqd-input"> — no React, no Tailwind. Same tokens, same look.

States

<input class="sqd-input" type="text" placeholder="Placeholder" />
<input class="sqd-input" type="text" value="With a value" />
<input class="sqd-input" type="text" placeholder="Disabled" disabled />
<input class="sqd-input" type="text" value="Invalid" aria-invalid="true" />

With label

No component needed — a plain label + input.

<label class="sqd-field">
  <span class="sqd-label">Email</span>
  <input class="sqd-input" type="email" placeholder="you@example.com" />
</label>