Label

Wrap a control in a label and the spacing, hint text and choice layouts follow. The label is the layout primitive for every form control in this framework.

Class	Does what
`label`	Block label with spacing for the control it wraps
`block`	On a label wrapping a radio: renders it as a selectable card

Label and control

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

<label>
  Email
  <input type="email" placeholder="you@example.com" />
</label>

Hint text

A small after the control becomes a hint, and the control's bottom margin collapses into it.

<label class="label">
  Username
  <input type="text" class="input" />
  <small>Letters, numbers and dashes.</small>
</label>

<label>
  Username
  <input type="text" />
  <small>Letters, numbers and dashes.</small>
</label>

Invalid state

A label's leading p turns error-colored when the control after it is invalid.

<label class="label">
  <p>Email</p>
  <input type="email" class="input input-error" aria-invalid="true" value="not-an-email" />
  <small class="text-error">Enter a valid email address.</small>
</label>

<label>
  <p>Email</p>
  <input type="email" aria-invalid="true" value="not-an-email" />
  <small class="error">Enter a valid email address.</small>
</label>

Classless: <code>aria-invalid="true"</code> drives the error color on its own. <code>.input-error</code> is there for when you cannot set the attribute.