Sections

Labels

Labels are used to describe inputs, select menus, textareas, radio buttons, and checkboxes.

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="grid gs4 gsy fd-column">
    <label class="grid--cell s-label" for="question-title">Question title</label>
    <div class="grid ps-relative">
        <input class="grid--cell 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
Name Size Class Example
Small 12px .s-label__sm
Default 15px N/A
Medium 17px .s-label__md
Large 21px .s-label__lg
Extra Large 27px .s-label__xl

Description copy

Section titled Description copy

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

<form class="grid gs4 gsy fd-column">
    <div class="grid--cell">
        <label class="d-block s-label" for="example-item">
            Question title
            <p class="s-description mt2">Clear question titles are more likely to get answered.</p>
        </label>
    </div>
    <div class="grid 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

When you need to flag labels as required or optional, use the following flags. Use the full word “Required” or “Optional” for these flags instead of using asterisks. If a majority of a form’s inputs are required, it isn’t necessary to show that they’re required until after the form has been submitted with errors. It may be more appropriate to only mark the non-required fields as optional.

Optional

Section titled Optional
<form class="grid gs4 gsy fd-column">
    <label class="grid--cell s-label" for="question-tags">Question tags <span class="s-label--status">Optional</span></label>
    <div class="grid ps-relative">
        <input class="grid--cell s-input" type="text" id="question-tags" placeholder="e.g. Why doesn’t Stack Overflow use a custom web font?"/>
    </div>
</form>

Required

Section titled Required
<form class="grid gs4 gsy fd-column">
    <label class="grid--cell s-label" for="question-title-required">Question title <span class="s-label--status s-label--status__required">Required</span></label>
    <div class="grid ps-relative">
        <input class="grid--cell s-input" type="text" id="question-title-required" placeholder="e.g. Why doesn’t Stack Overflow use a custom web font?"/>
    </div>
</form>

New

Section titled New
<form class="grid gs4 gsy fd-column">
    <label class="grid--cell s-label" for="question-title-new">What is your favorite animal? <span class="s-label--status s-label--status__new">New</span></label>
    <div class="grid ps-relative">
        <input class="grid--cell s-input" type="text" id="question-title-new" placeholder="e.g. hedgehog, platypus, sugar glider"/>
    </div>
</form>

Beta

Section titled Beta
<form class="grid gs4 gsy fd-column">
    <label class="grid--cell s-label" for="question-title-beta">Notify people <span class="s-label--status s-label--status__beta">Beta</span></label>
    <div class="grid ps-relative">
        <input class="grid--cell s-input" type="text" id="question-title-beta" placeholder="e.g. jdoe, bgates, sjobs"/>
    </div>
</form>
Edit on GitHub