Form Label component

About

The vf-form__label represents a related caption for a form item.

Usage

All form items need to include a label (using <label class="vf-fprm__label"></label>).

These should be as short as possible. If you need to include more details use helper text (using <p class="vf-form__helper"></p>).

If your input is required use the component <p class="vf-form__label vf-form__label--required">...</p>.

A vf-form__input that is used for search does not require a vf-form__label but must include descrtiptive placeholder text on the input.

Install

This component is distributed with npm. After installing npm, you can install the vf-form__label with this command.

$ yarn add --dev @visual-framework/vf-form__label

Sass/CSS

The source files included are written in Sass(scss). You can point your Sass include-path at your node_modules directory and import it like this.

@import "@visual-framework/vf-form__label/index.scss";

Make sure you import Sass requirements along with the modules. You can use a project boilerplate or the vf-sass-starter

Help

• Read the Visual Framework troubleshooting
• Open a ticket
• Chat on Slack