Component

Input

A soft field. The label rests on the text line, then rises once you focus or type.

Classes

Class	Type
input	Component	The label that wraps the field.
input-sm	Size	Small.
input-lg	Size	Large.
input-start	Part	An icon before the text. It centers on one line.
input-end	Part	An icon after the text.
primary	Color	Indigo by default.
secondary	Color	Pink by default.
tertiary	Color	Teal by default.
neutral	Color	Gray by default. Used when you set no color.
success	Color	Green by default.
error	Color	Red by default.
warning	Color	Amber by default.
info	Color	Sky by default.

Field

The placeholder is a single space. That is how the label knows the field is empty. The span is the label.

<label class="input">
  <input placeholder=" ">
  <span>Email</span>
</label>

Colors

PrimarySecondaryTertiaryNeutralSuccessErrorWarningInfo

<label class="input primary">
  <input placeholder=" " value="Primary">
  <span>Primary</span>
</label>
<label class="input secondary">
  <input placeholder=" " value="Secondary">
  <span>Secondary</span>
</label>
<label class="input tertiary">
  <input placeholder=" " value="Tertiary">
  <span>Tertiary</span>
</label>
<label class="input neutral">
  <input placeholder=" " value="Neutral">
  <span>Neutral</span>
</label>
<label class="input success">
  <input placeholder=" " value="Success">
  <span>Success</span>
</label>
<label class="input error">
  <input placeholder=" " value="Error">
  <span>Error</span>
</label>
<label class="input warning">
  <input placeholder=" " value="Warning">
  <span>Warning</span>
</label>
<label class="input info">
  <input placeholder=" " value="Info">
  <span>Info</span>
</label>

Sizes

SmallRegularLarge

<label class="input input-sm">
  <input placeholder=" ">
  <span>Small</span>
</label>

Icons

The text and the label indent to clear the icons.

<label class="input">
  <span class="input-start" aria-hidden="true"><svg><!-- search --></svg></span>
  <input placeholder=" ">
  <span>Search</span>
  <span class="input-end" aria-hidden="true"><svg><!-- send --></svg></span>
</label>

With a message

Use a work address.

<label class="input error">
  <input placeholder=" ">
  <span>Email</span>
</label>
<p class="message">Use a work address.</p>

No color class means neutral. While the field is empty and not focused, the label is large and dim, on the text line. Focus, or the first letter, shrinks it to a caption and the caret is already where the letters go.