Webform Libraries

Last updated on
19 July 2023

This documentation needs work. See "Help improve this page" in the sidebar.

The Webform module utilizes third-party Open Source libraries to enhance webform elements and to provide additional functionality. It is recommended that these libraries are installed in your Drupal installation's /libraries or /web/libraries directory. If these libraries are not installed, they will be automatically loaded from a CDN. All libraries are optional and can be excluded via the admin settings form. (Other optional functionality is provided by Webform sub-modules and Webform add-ons.)

There are several ways to download the needed third-party libraries.

Recommended

Alternatives

  • Generate a composer.json file using drush webform:libraries:composer.
  • Execute drush webform:libraries:download, to download third-party libraries required by the Webform module. (OSX/Linux)
  • Execute drush webform:composer:update, to update your Drupal installation's composer.json to include the Webform module's selected libraries as repositories.
  • Download and extract a zipped archive containing all webform libraries (6.1.x or 6.2.x) and extract the directories and files to /libraries or /web/libraries

Algolia Places
Algolia Places provides a fast, distributed and easy way to use an address search autocomplete JavaScript library on your website.
(Algolia Places is by the location places elements. Required by Location (Algolia Places) element.)
@see known accessibility issues
Choices
Choices.js is a lightweight, configurable select box/text input plugin. Similar to Select2 and Selectize but without the jQuery dependency.
(Choices.js is used to improve the user experience for select menus. Choices.js is an alternative to Select2.)
@see known accessibility issues
CKEditor: Autogrow
Automatically expand and shrink vertically depending on the amount and size of content entered in its editing area.
(Allows CKEditor to automatically expand and shrink vertically.)
CKEditor: CodeMirror
Provides syntax highlighting for the CKEditor with the CodeMirror Plugin.
(Makes it easier to edit the HTML source.)
@see known accessibility issues
CKEditor: Fake Objects
Utility required by CKEditor link plugin.
(Allows CKEditor to use basic image and link dialog.)
CKEditor: Image
Provides a basic image dialog for CKEditor.
(Allows CKEditor to use basic image dialog, which is not included in Drupal core.)
CKEditor: Link
Provides a basic link dialog for CKEditor.
(Allows CKEditor to use basic link dialog, which is not included in Drupal core.)
Code Mirror
Code Mirror is a versatile text editor implemented in JavaScript for the browser.
(Code Mirror is used to provide a text editor for YAML, HTML, CSS, and JavaScript configuration settings and messages.)
@see known accessibility issues
jQuery: Chosen
A jQuery plugin that makes long, unwieldy select boxes much more user-friendly.
(Chosen is used to improve the user experience for select menus. Chosen is an alternative to Select2.)
@see known accessibility issues
jQuery.Hotkeys
jQuery Hotkeys is a plug-in that lets you easily add and remove handlers for keyboard events anywhere in your code supporting almost any key combination.
(jQuery Hotkeys is used by the form builder to quickly add and save elements.)
@see known accessibility issues
jQuery: Image Picker
A simple jQuery plugin that transforms a select element into a more user friendly graphical interface.
(Image Picker is used by the Image select element. Required by Image select element.)
@see known accessibility issues
jQuery: Input Mask
Input masks ensures a predefined format is entered. This can be useful for dates, numerics, phone numbers, etc…
(Input masks are used to ensure predefined and custom formats for text fields.)
@see known accessibility issues
jQuery: International Telephone Input
A jQuery plugin for entering and validating international telephone numbers. It adds a flag dropdown to any input, detects the user's country, displays a relevant placeholder and provides formatting/validation methods.
(International Telephone Input is used by the Telephone element.)
@see known accessibility issues
jQuery: RateIt
Rating plugin for jQuery. Fast, progressive enhancement, touch support, customizable (just swap out the images, or change some CSS), unobtrusive JavaScript (using HTML5 data-* attributes), RTL support. The Rating plugin supports as many stars as you'd like, and also any step size.
(RateIt is used to provide a customizable rating element. Required by Rating element.)
@see known accessibility issues
jQuery: Select2
Select2 gives you a customizable select box with support for searching and tagging.
(Select2 is used to improve the user experience for select menus. Select2 is the recommended select menu enhancement library.)
@see known accessibility issues
jQuery: Text Counter
A jQuery plugin for counting and limiting characters/words on text input, or textarea, elements.
(Word or character counting, with server-side validation, is available for text fields and text areas.)
@see known accessibility issues
jQuery: Timepicker
A lightweight, customizable javascript timepicker plugin for jQuery, inspired by Google Calendar.
(Timepicker is used to provide a polyfill for HTML 5 time elements.)
@see known accessibility issues
Progress Tracker
A flexible SASS component to illustrate the steps in a multi-step process e.g. a multi-step form, a timeline or a quiz.
(Progress Tracker is used by multi-step wizard forms.)
@see known accessibility issues
Signature Pad
Signature Pad is a JavaScript library for drawing smooth signatures. It is HTML5 canvas based and uses variable width Bézier curve interpolation. It works in all modern desktop and mobile browsers and doesn't depend on any external libraries.
(Signature Pad is used to provide a signature element. Required by Signature element.)
@see known accessibility issues
SVG Pan & Zoom
Simple pan/zoom solution for SVGs in HTML.
(Svg-pan-zoom is used by custom options elements.)
@see known accessibility issues
Tabby
Tabby provides lightweight, accessible vanilla JS toggle tabs.
(Tabby is used to display tabs in the administrative UI)
@see known accessibility issues
Tippy.j (5.x)
Tippy.js is the complete tooltip, popover, dropdown, and menu solution for the web, powered by Popper.
(Tippy.js is used to provide a tooltips. Tippy.js 5.x is compatible with Drupal 8.x.)
Tippy.js (6.x)
Tippy.js is the complete tooltip, popover, dropdown, and menu solution for the web, powered by Popper.
(Tippy.js is used to provide a tooltips. Tippy.js 6.x is compatible with Drupal 9.x.)

This documentation was generated by the Webform module and MUST be updated using the `drush webform-docs` command.

Help improve this page

Page status: Needs work

You can: