beta This component version is ready to be used but is still in active development.

Label form

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

github location npm version

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.

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__label": "Form Label"
}
 %}
{% include "../path_to/vf-form__label/vf-form__label.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__label', {
  "component-type": "form",
  "form__label": "Form Label"
} %}
                
HTML
<label for="" class="vf-form__label">Form Label</label>
              
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__label": "Form Label",
  "required": true
}
 %}
{% include "../path_to/vf-form__label/vf-form__label.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__label', {
  "component-type": "form",
  "form__label": "Form Label",
  "required": true
} %}
                
HTML
<label for="" class="vf-form__label | vf-form__label--required">Form Label<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>
              

Examples

Installation info

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

Changelog

Changelog

3.0.0-alpha.0

  • style updates for latest vf-form refactor

2.0.1

  • changes any set- style functions to cleaner version

2.0.0

  • Changes required SVG fill color to red.
  • Makes the required SVG half the relative size of the text.
  • https://github.com/visual-framework/vf-core/pull/1228/

1.2.0

  • updates spacing design tokens
  • requires v2.0.0 of the vf-design-tokens package or newer

1.1.0

  • changes the required asterick colour from red to blue, as red is more of an 'error' colour

1.0.0

  • adds a required asterick label (uses <p> tag)

1.0.0-alpha.9

  • Revert "Make vf-form subpatterns workable"
  • https://github.com/visual-framework/vf-core/commit/706953b6fcfbbd1965d17b2ca082432af90ab752

Assets



File system location: components/vf-form__label

Find an issue on this page? Propose a change or discuss it.