Labels
- HTML/CSS Available
- Web Component In Progress
- Last Updated
2.0.0
Labels describe form elements and indicate whether they’re required or optional.
See Forms for guidance on composing full forms.
Variations
Default
Use to describe a form input.
Default
Press Ctrl + C to copy
<label class="mds-form__label"> First Name </label>Required
Use to indicate an input is required.
Required
Press Ctrl + C to copy
<label class="mds-form__label"> First Name <abbr class="mds-form__label-required-indicator" title="This field is required." aria-hidden="true">*</abbr>
<span class="mds-form__label-required-indicator-label">Required Field.</span>
</label>Optional
Use to indicate an input is optional.
Optional
Press Ctrl + C to copy
<label class="mds-form__label"> First Name<span class="mds-form__label-optional"> (Optional) </span>
</label>Sizing
Sizing affects text size. The default size is medium, and you can use a modifier class to make the label smaller (mds-form__label--small) or larger (mds-form__label--large).
Small
Medium (Default)
Large
Press Ctrl + C to copy
<label class="mds-form__label mds-form__label--small"> First Name <abbr class="mds-form__label-required-indicator" title="This field is required." aria-hidden="true">*</abbr>
<span class="mds-form__label-required-indicator-label">Required Field.</span>
</label>Guidelines
Don’t Use When
- Providing details or requirements about a form field, like password requirements. Instead, use Microcopy.
Visual Language
- Match the size of labels to the form element they’re paired with.
Editorial
- Use title case.
- Clearly written labels should eliminate the need for placeholder text in text boxes and text areas.
Related UI Components
Related UX Patterns
Accessibility
- Always include a
labelwith each form element. See the Forms composition section for examples. - Labels within Forms must always be visible.
- Never use
placeholdertext in place of alabel. - Include a
forattribute on eachlabelwith a value matching theidattribute on the correspondinginput,textareaorselect.
Code Reference
- Always wrap grouped form elements in a
mds-form__field-groupcontainer.
<div class="mds-form__field-group">
<label class="mds-form__label" for="first-name">First Name</label>
<input class="mds-form__input" type="text" id="first-name" placeholder="First Name" />
</div>CSS Class References
|
Class |
Applies to |
Outcome |
|---|---|---|
|
|
|
Applies small styles to the label text. |
|
|
|
Applies large styles to the label text. |