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.1
2
3
4
5
6
<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>
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 |
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.
1
2
3
4
5
6
<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>
1
2
3
4
5
6
<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>
When a label or input needs further explantation, text should be placed directly underneath it.
1
2
3
4
5
6
7
8
9
10
11
<form class="grid gs4 gsy fd-column">
<div class="grid--cell">
<div class="grid gs2 gsy fd-column">
<label class="grid--cell s-label" for="question-title-copy">Question title</label>
<p class="grid--cell s-description">Clear question titles are more likely to get answered.</p>
</div>
</div>
<div class="grid ps-relative">
<input class="grid--cell s-input" type="text" id="question-title-copy" placeholder="e.g. Why doesn’t Stack Overflow use a custom web font?"/>
</div>
</form>