Solid

Components

Text field

Inputs, textareas and selects with the halo focus.

Default

Fields take Pajamas’ full border and blue halo on focus, with Carbon’s square corners. The label sits above, helper text below.

<label>
  <span>Company</span>
  <input class="sd-field__input" placeholder="Acme" />
</label>

States

<input class="sd-field__input" aria-invalid="true" />
<input class="sd-field__input" disabled />

Textarea and select

<textarea class="sd-field__input" rows="3"></textarea>
<select class="sd-field__input">…</select>