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

Input form

The vf-form__input is a text field that allows the site visitor to enter text data.

github location npm version

Usage

Use the vf-form__input when you need the site visitor to enter text data as part of filling out a larger vf-form.

When to use

Use the vf-form__input when a site visitor has to input text data.

Use the vf-form__input with a type attribute of search for a search input.

Use the vf-form__input with a type attribute of password for a password input.

Use the vf-form__input--filter with a type attribute of search for an interactive 'type ahead' search input.

When not to use

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

vf-form__input--filter:

  • This variant is only to be used when there is some sort of autocomplete / typeahead filtering needed when searching.
  • This is not to be used in place of the normal input and button because it's more 'visually appealing'.

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"
}
 %}
{% include "../path_to/vf-form__input/vf-form__input.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__input', {
  "component-type": "form"
} %}
                
HTML
<div class="vf-form__item">
  <label class="vf-form__label" for="text">Text</label>
  <input type="text" id="text" class="vf-form__input">
</div>
              
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",
  "search_placeholder": "Search all of EMBL.org"
}
 %}
{% include "../path_to/vf-form__input/vf-form__input.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__input', {
  "component-type": "form",
  "search_placeholder": "Search all of EMBL.org"
} %}
                
HTML
<div class="vf-form__item">
  <label class="vf-form__label" for="search">Search</label>
  <input type="search" id="search" class="vf-form__input" placeholder="Search all of EMBL.org">
</div>
              
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",
  "search_placeholder": "Search this book"
}
 %}
{% include "../path_to/vf-form__input/vf-form__input.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__input', {
  "component-type": "form",
  "search_placeholder": "Search this book"
} %}
                
HTML
<div class="vf-form__item">
  <label class="vf-form__label | vf-u-sr-only" for="search">Search</label>
  <input type="search" id="search" class="vf-form__input vf-form__input--filter" placeholder="Search this book">
</div>
              
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",
  "invalid": true
}
 %}
{% include "../path_to/vf-form__input/vf-form__input.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__input', {
  "component-type": "form",
  "invalid": true
} %}
                
HTML
<div class="vf-form__item">
  <label class="vf-form__label" for="text">Text</label>
  <input type="text" id="text" class="vf-form__input vf-form__input--invalid">
</div>
              
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"
}
 %}
{% include "../path_to/vf-form__input/vf-form__input.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__input', {
  "component-type": "form"
} %}
                
HTML
<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>
</div>
              
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"
}
 %}
{% include "../path_to/vf-form__input/vf-form__input.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__input', {
  "component-type": "form"
} %}
                
HTML
<div class="vf-form__item">
  <label class="vf-form__label" for="password">Password</label>
  <input type="password" id="password" class="vf-form__input">
</div>
              

Examples

Installation info

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

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

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__input/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.1

  • changes out the CSS for invalid as an actual class vf-form__input--invalid.

3.0.0-alpha.0

  • reworks the inputs to make more use of nunjucks
  • restyles the inputs to match latest design direction
  • adds better documentation
  • adds a live search input variant

2.0.1

  • changes any set- style functions to cleaner version

2.0.0

  • Changes styling of the inputs.
  • Changes order of form helpers, error messages, etc.
  • Updates example .njk to use stack.
  • https://github.com/visual-framework/vf-core/pull/1228/

1.1.0

  • adds type="search" form input
  • styles the cancel button so it uses our icon set and is bigger than user agent default

1.0.1

  • adds webkit-appearance: none; as needed for Safari browsers as autoprefixer is not doing this

1.0.0

  • removes vf-u-sr-only as not needed with removal of floatLabel.js
  • adds invalid input example
  • updates disabled styles
  • reduces internal padding of the input box

1.0.0-alpha.10

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

Assets



File system location: components/vf-form__input

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