Sprout Social

Components

Label

View on GitHub

Label is a themed version of the native label element that can be paired with other form components like Input, Textarea, Radio and Checkbox.

Labels are used to describe each element within a form. All form elements need a visible label in order to be accessible to all users. Although it is possible to make a visually hidden label visible to assistive technology such as screen readers, we strongly discourage visually hiding labels because the resulting form will not be completely accessible to sighted users.

If you are using a label for a form, check out the component. It handles errors, labels and formatting for you.

You can also refer to our form patterns for guidance on layout, proper usage and accessibility of various form elements.

Best Practices

Labels should:

  • Be meaningful, clear, and concise.
  • Be short (i.e. 1-4 words).
  • Be sentence case.
  • Be written in plain language.
  • Be visible to sighted users and screen readers alike.
  • Use an htmlFor attribute that corresponds to the id of the associated form field. This ensures that assistive technology will announce the correct label per field.
  • Use an asterisk (*) after the label if the field is required.