@ec-europa/ecl-forms-labels

    0.8.0 • Public • Published

    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

    Keywords

    none

    Install

    npm i @ec-europa/ecl-forms-labels

    DownloadsWeekly Downloads

    7

    Version

    0.8.0

    License

    EUPL-1.1

    Unpacked Size

    2.85 kB

    Total Files

    5

    Last publish

    Collaborators

    • kalin.chernev
    • weslito
    • yhuard