@ec-europa/ecl-forms-labels

ECL Form Labels

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
626Jun 11, 2021Jan 30, 2017Minified + gzip package size for @ec-europa/ecl-forms-labels in KB

Readme

Labels

Labels inform the user about the type of information that should be typed or selected in a form element.

Why and how to use this component

These are labels that tell users what the corresponding input fields mean, they can be composed of a main "label" and a "help block" element

  • label
  • help block

When to use

In every form element.

Do not use this component

With left aligned labels. Top aligned labels also translate well on mobile

Avoid

  • labels written in all caps - they are more difficult to read and scan
  • using placeholder text as labels
  • placing check boxes side by side - check boxes underneath each other allows easy scanning
  • using optional fields in forms - if you use them, you should clearly distinguish which fields are mandatory * from those that are optional. The convention is to use an asterisk (*) next to the required fields' labels and to display the message "Fields marked with an asterisk (*) are required." on the top of the page
  • hiding basic helper text

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.