Local components

Whenever you need to use a vf-form__item and related input or control you need to wrap them with a vf-form.

The vf-form makes use of the vf-stack layout component to evenly distrubute the form inputs on a page.

Variants

Nunjucks syntax

Depending on your environment you'll want to use render or include. As a rule of thumb: server-side use include, precompiled browser use render. If you're using vf-eleventy you should use include.

Using `include`

You'll need to pass a context object from your code or Yaml file (example), as well as the path to the Nunjucks template. Nunjucks' include is an abstraction of render and provides some additional portability.


{% set context fromYourYamlFile %}
- or -
{% set context = {
  "component-type": "form",
  "form_action": "#",
  "form_method": "get",
  "form_button_text": "Submit"
}
 %}
{% include "../path_to/vf-form/vf-form.njk" %}

Using `render`

This approach is best for bare-bones Nunjucks environments, such as precompiled templates with the Nunjucks slim runtime where include is not be available.

{% render '@vf-form', {
  "component-type": "form",
  "form_action": "#",
  "form_method": "get",
  "form_button_text": "Submit"
} %}

HTML

<form class="vf-stack vf-stack--400" action="#" method="get">
  <div class="vf-form__item vf-stack">

    <label for="text" class="vf-form__label vf-form__label--required">
      Form Label
      <span class="vf-u-sr-only">this field is required.</span>
      <svg class="vf-icon vf-icon--asterick" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <title>asterick</title>
        <path d="M23.555,8.729a1.505,1.505,0,0,0-1.406-.98H16.062a.5.5,0,0,1-.472-.334L13.405,1.222a1.5,1.5,0,0,0-2.81,0l-.005.016L8.41,7.415a.5.5,0,0,1-.471.334H1.85A1.5,1.5,0,0,0,.887,10.4l5.184,4.3a.5.5,0,0,1,.155.543L4.048,21.774a1.5,1.5,0,0,0,2.31,1.684l5.346-3.92a.5.5,0,0,1,.591,0l5.344,3.919a1.5,1.5,0,0,0,2.312-1.683l-2.178-6.535a.5.5,0,0,1,.155-.543l5.194-4.306A1.5,1.5,0,0,0,23.555,8.729Z" />
      </svg>
    </label>

    <p class="vf-form__helper">Form helper text</p>

    <input type="text" id="text" class="vf-form__input">

    <p class="vf-form__helper vf-form__helper--error">You have done something wrong.</p>

  </div>

  <div class="vf-form__item vf-stack">

    <label for="text" class="vf-form__label vf-form__label--required">
      Form Label
      <span class="vf-u-sr-only">this field is required.</span>
      <svg class="vf-icon vf-icon--asterick" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <title>asterick</title>
        <path d="M23.555,8.729a1.505,1.505,0,0,0-1.406-.98H16.062a.5.5,0,0,1-.472-.334L13.405,1.222a1.5,1.5,0,0,0-2.81,0l-.005.016L8.41,7.415a.5.5,0,0,1-.471.334H1.85A1.5,1.5,0,0,0,.887,10.4l5.184,4.3a.5.5,0,0,1,.155.543L4.048,21.774a1.5,1.5,0,0,0,2.31,1.684l5.346-3.92a.5.5,0,0,1,.591,0l5.344,3.919a1.5,1.5,0,0,0,2.312-1.683l-2.178-6.535a.5.5,0,0,1,.155-.543l5.194-4.306A1.5,1.5,0,0,0,23.555,8.729Z" />
      </svg>
    </label>

    <p class="vf-form__helper">Form helper text</p>

    <input type="text" id="text" class="vf-form__input">

    <p class="vf-form__helper vf-form__helper--error">You have done something wrong.</p>

  </div>


  <fieldset class="vf-form__fieldset vf-stack vf-stack--400">
    <legend class="vf-form__legend">Pick your favourite(s).</legend>


    <div class="vf-form__item vf-form__item--checkbox">
      <input type="checkbox" name="fruits" value="apples" id="fruit_01" class="vf-form__checkbox">
      <label for="fruit_01" class="vf-form__label">Apples</label>
    </div>


    <div class="vf-form__item vf-form__item--checkbox">
      <input type="checkbox" name="fruits" value="bums" id="fruit_02" class="vf-form__checkbox">
      <label for="fruit_02" class="vf-form__label">Bananas</label>

      <p class="vf-form__helper">Some text to help with things</p>
    </div>


    <div class="vf-form__item vf-form__item--checkbox">
      <input type="checkbox" name="fruits" value="mangos" id="fruit_03" class="vf-form__checkbox">
      <label for="fruit_03" class="vf-form__label">Mangos</label>
    </div>


    <div class="vf-form__item vf-form__item--checkbox">
      <input type="checkbox" name="fruits" value="oranges" id="fruit_04" class="vf-form__checkbox">
      <label for="fruit_04" class="vf-form__label">Oranges</label>
    </div>


    <div class="vf-form__item vf-form__item--checkbox">
      <input type="checkbox" name="fruits" value="pears" id="fruit_05" class="vf-form__checkbox" disabled>
      <label for="fruit_05" class="vf-form__label">Pears</label>
    </div>


    <div class="vf-form__item vf-form__item--checkbox">
      <input type="checkbox" name="fruits" value="strawberries" id="fruit_06" class="vf-form__checkbox vf-form__checkbox--invalid">
      <label for="fruit_06" class="vf-form__label | vf-form__label--required">Strawberries<span class="vf-u-sr-only">field is required.</span>
        <svg class="vf-icon vf-icon--asterick" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
          <title>asterick</title>
          <path d="M23.555,8.729a1.505,1.505,0,0,0-1.406-.98H16.062a.5.5,0,0,1-.472-.334L13.405,1.222a1.5,1.5,0,0,0-2.81,0l-.005.016L8.41,7.415a.5.5,0,0,1-.471.334H1.85A1.5,1.5,0,0,0,.887,10.4l5.184,4.3a.5.5,0,0,1,.155.543L4.048,21.774a1.5,1.5,0,0,0,2.31,1.684l5.346-3.92a.5.5,0,0,1,.591,0l5.344,3.919a1.5,1.5,0,0,0,2.312-1.683l-2.178-6.535a.5.5,0,0,1,.155-.543l5.194-4.306A1.5,1.5,0,0,0,23.555,8.729Z" />
        </svg>
      </label>

      <p class="vf-form__helper vf-form__helper--error">You didn't pick Strawberries?</p>
    </div>

  </fieldset>

  <fieldset class="vf-form__fieldset | vf-stack vf-stack--400">
    <legend class="vf-form__legend">Which do you like?</legend>



    <div class="vf-form__item vf-form__item--radio">
      <input type="radio" name="fruits" value="Apples" id="1" class="vf-form__radio">
      <label for="1" class="vf-form__label">Apples</label>

      <p class="vf-form__helper">Some text to help with things</p>
    </div>


    <div class="vf-form__item vf-form__item--radio">
      <input type="radio" name="fruits" value="Bananas" id="2" class="vf-form__radio">
      <label for="2" class="vf-form__label">Bananas</label>
    </div>


    <div class="vf-form__item vf-form__item--radio">
      <input type="radio" name="fruits" value="Mangos" id="3" class="vf-form__radio">
      <label for="3" class="vf-form__label">Mangos</label>
    </div>


    <div class="vf-form__item vf-form__item--radio">
      <input type="radio" name="fruits" value="Oranges" id="4" class="vf-form__radio">
      <label for="4" class="vf-form__label">Oranges</label>
    </div>


    <div class="vf-form__item vf-form__item--radio">
      <input type="radio" name="fruits" value="Pears" id="5" class="vf-form__radio" disabled>
      <label for="5" class="vf-form__label">Pears</label>
    </div>


    <div class="vf-form__item vf-form__item--radio">
      <input type="radio" name="fruits" value="Strawberries" id="6" class="vf-form__radio">
      <label for="6" class="vf-form__label">Strawberries</label>
    </div>

  </fieldset>



  <div class="vf-form__item vf-stack">

    <label class="vf-form__label" for="vf-form__select">Choose a pet:</label>

    <select class="vf-form__select" id="vf-form__select">
      <option value="cat">Cat</option>
      <option value="hamster">Hamster</option>
      <option value="parrot">Parrot</option>
      <option value="dog" selected>Dog</option>
      <option value="spider">Spider</option>
      <option value="goldfish">Goldfish</option>
    </select>

  </div>


  <div class="vf-form__item">
    <label for="text-area" class="vf-form__label">Write Some More details</label>
    <textarea class="vf-form__textarea" id="text-area" name="text-area" rows="5"></textarea>
  </div>

  <button class="vf-button vf-button--primary">Submit</button>

</form>

Examples

Installation info

This component is distributed with npm. After installing npm, you can install the vf-form with this command. This will install all form items that work within a vf-form too.

$ 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/vf-form.scss";

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

Changelog

2.0.0-alpha.0

removes vf-form__core as a thing and shows example of how to make a form.

1.1.0

Updates example to use stack.
Includes example of inline radios.
https://github.com/visual-framework/vf-core/pull/1228/

1.0.1

vf-form/vf-form.scss requires __fieldset and __legend but they are missing from the package.json

1.0.0

moves example to it's own template to allow for more labelling
removes flotLabel.js but keeps a log for browser console to let developers know

Assets

File system location: components/vf-form

The Visual Framework

Patterns

Container

Block

Element

Layout

Forms

Utility

Tools

Search

Form form

Usage

Variants

Using `include`

Using `render`

Examples

Sass/CSS

Changelog

2.0.0-alpha.0

1.1.0

1.0.1

1.0.0

Assets

Form form

Usage

Variants

Using include

Using render

Examples

Sass/CSS

Changelog

2.0.0-alpha.0

1.1.0

1.0.1

1.0.0

Assets

Using `include`

Using `render`