@visual-framework/vf-form__core v1.1.2

Form component

Usage

vf-form__input

Use these when you need short answers to questions in your form. If you need the user to write more longer pieces of text then make use of <textarea class="vf-form__textarea"></textarea>.

Make sure your text inputs have the relevant labels (using <label class="vf-fprm__label"></label>) and helper text (using <p class="vf-form__helper"></p>).

If your input is required there is also CSS used to style the input box when it is not completed. Make use of the label available if the form is sent to the server for validation (using <p class="vf-form__label vf-form__label--required">...</p>).

vf-form__label

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>.

vf-form__helper

If you need to include more descriptive explanations of what the input requires make use of the component <span class="vf-form__helper"></span> where you can add more text.

If your form is has any type of validation (either on the client or server) you can make use of vf-form__helper--error to help with inputs that do not have the correct content.

vf-form__fieldset

Use the component vf-form__fieldset when there is a relationship betweent form inputs. This maybe a group of text inputs or a group of checkboxes or radio inputs. Or a variation of all.

The first HTML element that needs to be inside of <fieldset class="vf-form__fieldset"> needs to be a legend - <legend class="vf-form__legend">Describing the group</legend>

Install

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

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

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__core/vf-form__core.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