Sections
Labels
Figma
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.
Base style
Section titled Base style<form class="d-flex gy4 fd-column">
<label class="flex--item s-label" for="question-title">Question title</label>
<div class="d-flex ps-relative">
<input class="flex--item 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 copyWhen a label or input needs further explantation, text should be placed directly underneath it.
<form class="d-flex gy4 fd-column">
<div class="flex--item">
<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="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 StatusWhen 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="d-flex gy4 fd-column">
<label class="flex--item s-label" for="question-tags">Question tags <span class="s-label--status">Optional</span></label>
<div class="d-flex ps-relative">
<input class="flex--item 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="d-flex gy4 fd-column">
<label class="flex--item s-label" for="question-title-required">Question title <span class="s-label--status s-label--status__required">Required</span></label>
<div class="d-flex ps-relative">
<input class="flex--item 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="d-flex gy4 fd-column">
<label class="flex--item 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="d-flex ps-relative">
<input class="flex--item s-input" type="text" id="question-title-new" placeholder="e.g. hedgehog, platypus, sugar glider"/>
</div>
</form><form class="d-flex gy4 fd-column">
<label class="flex--item s-label" for="question-title-beta">Notify people <span class="s-label--status s-label--status__beta">Beta</span></label>
<div class="d-flex ps-relative">
<input class="flex--item s-input" type="text" id="question-title-beta" placeholder="e.g. jdoe, bgates, sjobs"/>
</div>
</form>