Labels

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

Classes

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

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

<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

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

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

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>