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

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

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

If your input is required use the component ....

`vf-form__helper`

If you need to include more descriptive explanations of what the input requires make use of the component  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

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.

File system location: components/vf-form__core

Variants

Variant: Default beta container

Nunjucks demo

{% render '@vf-form__core--default', {
  "component-type": "container"
} %}

Sample output

Left intentionally blank, see vf-form__core--example.

Sample output as HTML

Left intentionally blank, <a href="../detail/vf-form__core--example" class="vf-link" target="_parent">see vf-form__core--example</a>.

Assets

Nunjucks template

Variant: Example beta container

Nunjucks demo

{% render '@vf-form__core--example', {
  "component-type": "container"
} %}

Sample output

vf-form__item

Form Label

You have done something wrong.

Form helper text

vf-form__label

Form Label

vf-form__label--required

field is required.

vf-form__input

vf-form__helper

Form helper text

vf-form__helper--error

You have done something wrong.

vf-form__legend

This is a form legend

vf-form__fieldset (with no content)

vf-form__checkbox

Form Label

vf-form__checkbox--inline

Form Label

vf-form__select

Choose a pet:

vf-form__textarea

Write Some More details

Sample output as HTML

<div class="vf-u-margin__bottom--xxl">
  <p class="vf-text | vf-u-margin__bottom--l"><code class="vf-code-example">vf-form__item</code></p>
  <div class="vf-form__item">
    <label for="text" class="vf-form__label vf-form__label--required"><span class="vf-u-sr-only">this field is required.</span> <span class="vf-icon vf-icon--asterick"><svg 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></span></label>
    <label for="text" class="vf-form__label">Form Label</label>

    <input type="text" id="text" class="vf-form__input" placeholder="for item example">
    <p class="vf-form__helper vf-form__helper--error">You have done something wrong.</p>
    <p class="vf-form__helper">Form helper text</p>
  </div>
</div>
<div class="vf-u-margin__bottom--xxl">
  <p class="vf-text | vf-u-margin__bottom--l"><code class="vf-code-example">vf-form__label</code></p>
  <div class="vf-form__item">
    <label for="text" class="vf-form__label">Form Label</label>
  </div>
</div>
<div class="vf-u-margin__bottom--xxl">
  <p class="vf-text | vf-u-margin__bottom--l"><code class="vf-code-example">vf-form__label--required</code></p>
  <div class="vf-form__item">
    <p for="text" class="vf-form__label vf-form__label--required"><span class="vf-u-sr-only">field is required.</span> <span class="vf-icon vf-icon--asterick"><svg 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></span></p>
  </div>
</div>
<div class="vf-u-margin__bottom--xxl">
  <p class="vf-text | vf-u-margin__bottom--l"><code class="vf-code-example">vf-form__input</code></p>
  <form action="" class="vf-form">
    <div class="vf-form__item">
      <label class="vf-form__label" for="text">Text</label>
      <input type="text" id="text" class="vf-form__input" placeholder="Text">
    </div>

    <div class="vf-form__item">
      <label class="vf-form__label" for="password">Password</label>
      <input type="password" id="password" class="vf-form__input" placeholder="Password">
    </div>

    <div class="vf-form__item">
      <label class="vf-form__label" for="email">Disabled email</label>
      <input type="email" id="email" class="vf-form__input" disabled placeholder="disabled">
    </div>
    <div class="vf-form__item">
      <label class="vf-form__label" for="text-invalid">Invalid Text</label>
      <p for="text" class="vf-form__label vf-form__label--required"><span class="vf-u-sr-only">field is required.</span> <span class="vf-icon vf-icon--asterick"><svg 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></span></p>

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

      <p class="vf-form__helper vf-form__helper--error">You need to fill this out.</p>
    </div>
  </form>
</div>
<div class="vf-u-margin__bottom--xxl">
  <p class="vf-text | vf-u-margin__bottom--l"><code class="vf-code-example">vf-form__helper</code></p>
  <p class="vf-form__helper">Form helper text</p>
</div>
<div class="vf-u-margin__bottom--xxl">
  <p class="vf-text | vf-u-margin__bottom--l"><code class="vf-code-example">vf-form__helper--error</code></p>
  <p class="vf-form__helper vf-form__helper--error">You have done something wrong.</p>
</div>
<div class="vf-u-margin__bottom--xxl">
  <p class="vf-text | vf-u-margin__bottom--l"><code class="vf-code-example">vf-form__legend</code></p>
  <legend class="vf-form__legend">This is a form legend</legend>
</div>
<div class="vf-u-margin__bottom--xxl">
  <p class="vf-text | vf-u-margin__bottom--l"><code class="vf-code-example">vf-form__fieldset</code> <em>(with no content)</em></p>
  <fieldset class="vf-form__fieldset">
  </fieldset>
</div>
<div class="vf-u-margin__bottom--xxl">
  <p class="vf-text | vf-u-margin__bottom--l"><code class="vf-code-example">vf-form__checkbox</code></p>
  <div class="vf-form__item vf-form__item--checkbox">
    <input type="checkbox" id="checkbox-01" class="vf-form__checkbox">
    <label for="checkbox-01" class="vf-form__label">Form Label</label>
  </div>
</div>
<div class="vf-u-margin__bottom--xxl">
  <p class="vf-text | vf-u-margin__bottom--l"><code class="vf-code-example">vf-form__checkbox--inline</code></p>
  <div class="vf-form__item vf-form__item--checkbox vf-form__item--checkbox--inline">
    <input type="checkbox" id="checkbox-inline-01" class="vf-form__checkbox">
    <label for="checkbox-inline-01" class="vf-form__label">Form Label</label>
  </div>
</div>
<div class="vf-u-margin__bottom--xxl">
  <p class="vf-text | vf-u-margin__bottom--l"><code class="vf-code-example">vf-form__radio</code></p>
  <div class="vf-form__item vf-form__item--radio">

    <input type="radio" name="radio-button-group" id="radio-1" class="vf-form__radio">
    <label for="radio-1" class="vf-form__label">Form Label</label>
    <input type="radio" name="radio-button-group" id="radio-2" class="vf-form__radio">
    <label for="radio-2" class="vf-form__label">Form Label</label>
    <input type="radio" name="radio-button-group" id="radio-3" class="vf-form__radio">
    <label for="radio-3" class="vf-form__label">Form Label</label>
  </div>


  <div class="vf-form__item vf-form__item--inline vf-form__item--radio">

    <input type="radio" name="radio-button-group--inline" id="radio-inline-1" class="vf-form__radio">
    <label for="radio-inline-1" class="vf-form__label">Form Label</label>

    <input type="radio" name="radio-button-group--inline" id="radio-inline-2" class="vf-form__radio">
    <label for="radio-inline-2" class="vf-form__label">Form Label</label>

    <input type="radio" name="radio-button-group--inline" id="radio-inline-3" class="vf-form__radio">
    <label for="radio-inline-3" class="vf-form__label">Form Label</label>
  </div>
</div>
<div class="vf-u-margin__bottom--xxl">
  <p class="vf-text | vf-u-margin__bottom--l"><code class="vf-code-example">vf-form__select</code></p>
  <div class="vf-form__item">

    <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>
<div class="vf-u-margin__bottom--xxl">
  <p class="vf-text | vf-u-margin__bottom--l"><code class="vf-code-example">vf-form__textarea</code></p>
  <div class="vf-form__item">
    <label class="vf-form__label" for="vf-form__textarea">Write Some More details</label>
    <textarea class="vf-form__textarea" id="vf-form__textarea" name="vf-form__textarea" rows="5" placeholder="Write Some More details"></textarea>
  </div>
</div>

Assets

Nunjucks template

All components in this design system

Visual Framework Componet Rollup vf-componenet-rollup
Vf Core Components vf-core-components
vf-local-overrides vf-local-overrides
Visual Framework Sample Component vf-sample

This page is part of the components section.