An element to apply a supporting label (often to a form field)

  • Display


  • Selectors

  • Source

    GitHub ↗

  • Features


This is a support. Take note!

<input class='input my-2' type='text' placeholder='Miles McCain'>
<p class='support'>This is a support. Take note!</p>


The support element is used for visually secondary labels (usually for supporting—but non-critical—information). They are often helpful for building form interfaces. The support element is very simple: it applies a small font size and --color-muted.


Intrusiveness — Supports are intended to almost fade into the background; you’re only supposed to see it if you’re looking for it. For a more intrusive element, use a label.


Supports have full tone and priority support. They will automatically look appropriate in most contexts.

This is a neutral support.

This is a positive support.

This is a warning support.

This is a critical support.

This is a info support.

This is a urge support.

Example code
<p class="support ~neutral !low">This is a neutral support.</p>

<p class="support ~positive !low">This is a positive support.</p>

<p class="support ~warning !low">This is a warning support.</p>

<p class="support ~critical !low">This is a critical support.</p>

<p class="support ~info !low">This is a info support.</p>

<p class="support ~urge !low">This is a urge support.</p>


Be mindful of font size and color. By default, support elements can be very small. Combined with their sometimes muted color, they can sometimes be hard to read. While they should still pass accessibility guidelines, they don’t excel at them.

Don't use color to communicate. Instead, use color to support information you communicate through text. When this isn't possible, be sure to use a title attribute.

Be mindful of contrast. What looks good to you may not be readable for others. Text contrast is a good thing!

Support all navigation modes. Some people will interact with your interface using assitive technologies and/or a keyboard. Build your interface with these different modes in mind (for example, by setting the `tab-index` attribute on all interactive elements that aren't interactive by default).


There are two right answers.

Example code
<input class="input my-1" id="question" type="text" value="The Recurse Center">
<p class="support">There are two right answers.</p>

That's wrong. Stanford.

Example code
<div class="~critical !low">
  <input class="input my-1" type="text" value="Berkeley">
  <p class="support">That's wrong. Stanford.</p>


Name Type Default Description
--color-muted color sets the color

You can also customize this element by simply overriding any of its CSS attributes, listed here. Contextual variable defaults (e.g., --color-content) and global variables (e.g., --family-primary) are defined here.