Labels - Stack Overflow Design System

Classes

Class	Modifies	Description
`.s-label`	N/A	Base label style.
`.s-label__sm`	`.s-label`	Apply a small size.
`.s-label__lg`	`.s-label`	Apply a large size.

Labels inform users what information is being asked of them. They should be written in sentence case.

For usability reasons, if a label is connected with an input, the for="[id]" attribute should be filled in. This attribute references the input’s id="[value]" value. This makes clicking the label automatically focus the proper input.

Base style

Section titled Base style

<form class="s-form-group">
    <label class="s-label" for="question-title">Question title</label>
    <div class="d-flex ps-relative">
        <input class="s-input" type="text" id="question-title" placeholder="e.g. Why doesn’t Stack Overflow use a custom web font?"/>
    </div>
</form>

Sizes

Section titled Sizes

Class	Name	Size	Example
`.s-label__sm`	Small	14px	Question title
N/A	Default	16px	Question title
`.s-label__lg`	Large	22px	Question title

Description copy

Section titled Description copy

When a label or input needs further explantation, text should be placed directly underneath it.

<form class="s-form-group">
    <label class="s-label" for="example-item">
        Question title
    </label>
    <p class="s-description">Clear question titles are more likely to get answered.</p>
    <div class="d-flex ps-relative">
        <input class="s-input" id="example-item" type="text" placeholder="e.g. Why doesn’t Stack Overflow use a custom web font?" />
    </div>
</form>

Status

Section titled Status

Use status indicators to append essential context to a label. This pattern supports any of the various badge states available. When using this indicator, display the full word 'Required' rather than an asterisk. Note: If the majority of a form’s inputs are required, prioritize the asterisk pattern outlined in Input Accessibility instead.

<form class="s-form-group">
    <label class="s-label" for="question-title-required">Question title<span class="s-badge s-badge__danger">Required</span></label>
    <div class="d-flex ps-relative">
        <input class="s-input" type="text" id="question-title-required" placeholder="e.g. Why doesn’t Stack Overflow use a custom web font?"/>
    </div>
</form>

<form class="s-form-group">
    <label class="s-label" for="question-tags">Question tags<span class="s-badge">Optional</span></label>
    <div class="d-flex ps-relative">
        <input class="s-input" type="text" id="question-tags" placeholder="e.g. Why doesn’t Stack Overflow use a custom web font?"/>
    </div>
</form>

<form class="s-form-group">
    <label class="s-label" for="question-title-new">What is your favorite animal?<span class="s-badge s-badge__info">Saved for later</span></label>
    <div class="d-flex ps-relative">
        <input class="s-input" type="text" id="question-title-new" placeholder="e.g. hedgehog, platypus, sugar glider"/>
    </div>
</form>

<form class="s-form-group">
    <label class="s-label" for="question-title-beta">Notify people<span class="s-badge s-badge__featured">New feature</span></label>
    <div class="d-flex ps-relative">
        <input class="s-input" type="text" id="question-title-beta" placeholder="e.g. jdoe, bgates, sjobs"/>
    </div>
</form>