Label

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


  • Display

    Inherited

  • Selectors

    .label
  • Source

    GitHub ↗

  • Features

    TonesPriorities

<label class='label' for='name'>What is your name?</label>
<input class='input my-2' type='text' id='name' placeholder='Miles McCain'>

Overview

The label element is used for visually prominent labels. They are often helpful for building form interfaces. The label element is simple: it applies a medium weight and the --color-title to its content.

Considerations

Intrusiveness — Labels are intended to be seen. For a less intrusive label that can fall into the background, use a supra.

Variants

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

This is a neutral label.

This is a positive label.

This is a warning label.

This is a critical label.

This is a info label.

This is a urge label.

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

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

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

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

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

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

Accessibility

Use with label (<label>) elements. Using the .label element on <label> tags will help screenreaders and other assistive technologies better represent your content.

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).

Examples

There are two right answers.

Example code
<label class="label" for="question">Where is a fun place to be?</label>
<input class="input my-2" id="question" type="text" value="The Recurse Center">
<p class="support">There are two right answers.</p>

That's wrong. Stanford will win.

Example code
<div class="~critical !low">
  <label class="label" for="biggame">Who will win the Big Game?</label>
  <input class="input my-2" id="biggame" type="text" value="Berkeley">
  <p class="support">That's wrong. Stanford will win.</p>
</div>

Customization

Name Type Default Description
--color-title color sets the color
--kbd-color color theme("colors.white") 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.