Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/gugulethu-nyoni/formique

Formique is a lightweight, declarative JavaScript syntax library for generating WCAG accessibility and usability compliant forms.
https://github.com/gugulethu-nyoni/formique

formbuilder formique framework-agnostic-js-form-builder javascript js-form-schema semantq

Last synced: about 1 year ago
JSON representation

Formique is a lightweight, declarative JavaScript syntax library for generating WCAG accessibility and usability compliant forms.

Awesome Lists containing this project

README 

          
# Formique



Formique JS Form Builder Example



Formique is a robust and elegant WCAG and ARIA compliant form-building library tailored for JavaScript enthusiasts. It supports a wide array of input types, features JS-driven themes, and offers advanced functionalities like nested conditional logic and dynamic dropdowns. Highly customizable and extensible, Formique is built for the Semantq JS Framework but seamlessly integrates with Vanilla JS, React, Vue, Angular, and Svelte.



Formique is Open-source & MIT licensed.



## Accessibility Compliance - 



Formique is designed with a laser focus on WAI-ARIA and WCAG usability and accessibility, ensuring that the generated form HTML markup meets the highest standards of web accessibility.



With minimal declarative form input definitions, Formique takes care of the rest to ensure the final markup is comprehensive enough to meet [official](https://www.w3.org/WAI/tutorials/forms/) usability and accessibility standards. 



For more information on the Web Content (Forms) Accessibility Guidelines (WCAG), you can visit the [W3C website](https://www.w3.org/WAI/tutorials/forms/).



## Key Features



- **Declarative Syntax:** Define forms using a simple and intuitive schema.

- **Wide Range of Inputs:** Supports text, email, number, password, date, time, file uploads, and more.

- **Validation and Attributes:** Easily specify validation rules and attributes for each form field.

- **Dynamic Form Generation:** Generate forms dynamically based on your schema.

- **Framework Agnostic:** Currently works with Semantq and vanilla JS. (More frameworks to be added)

- **Accessibility and Usability Compliant:** Formique yields form markup compliant with WCAG.

- **Mobile Responsive:** Forms are mobile responsive out of the box.

- **Nested Dynamic Conditional Logic:** Implement complex conditional logic to show or hide form fields based on user input.

- **Dynamic Dropdowns:** Create dropdowns whose options change dynamically based on other field selections.

- **JavaScript-Driven Themes:** Apply themes dynamically using JavaScript for a customizable user interface.

- **WAI-ARIA and WCAG-Compliant HTML:** Ensure all form elements are accessible and meet WCAG standards.

- **Progressive Enhancement:** Forms function with or without JavaScript, ensuring accessibility and functionality across all environments.



## Why Choose Formique?



- **Vanilla JS:** No dependencies; works seamlessly with vanilla JS and Semantq JS framework. (More frameworks to be added)

- **Lightweight:** Minimal footprint optimized for performance.

- **Customizable:** Adapt the library to fit your project's unique needs for functionality and style.

- **Declarative:** Write your forms in JavaScript and define forms with a concise schema for better readability and maintainability.

- **Usability and Accessibility Compliant:** You just need to focus on defining form fields data. Formique handles WCAG compliance for you.

- **Mobile Responsive:** Formique forms are mobile responsive out of the box.

- **Dynamic Features:** Implement nested conditional logic, dynamic dropdowns, and JavaScript-driven themes to enhance user experience.

- **Progressive Enhancement:** Forms are designed to function with or without JavaScript, ensuring broad compatibility.



## Form Input Types Covered



- Text: ```html  ```

- Email: ```html  ```

- Number: ```html  ```

- Password: ```html  ```

- Telephone: ```html  ```

- Date: ```html  ```

- Time: ```html  ```

- Datetime-local: ```html  ```

- Month: ```html  ```

- Week: ```html  ```

- URL: ```html  ```

- Search: ```html  ```

- Color: ```html  ```

- File: ```html  ```

- Hidden: ```html  ```

- Image: ```html  ```

- Textarea: ```html  ```

- Radio: ```html  ```

- Checkbox: ```html  ```

- Select (Single & Multiple): ```html  ```

- Dynamic Single Select: Displays a single-select dropdown of subcategories based on a selected category. For example, it dynamically shows a dropdown of states when a country is selected from a list of countries: ```html  ```

- Submit: ```html  ```



# How to Write Form Schema



The form schema is an array of field definitions. Each field is defined by an array containing:

- Input definition (required)

- Input validation (optional)

- Input attributes (optional, including binding attribute (optional)

- Options (applicable to single select, multiple select, radio and check box inputs)



## Input Definition

- **Type**: The input type (e.g., 'text', 'email', 'radio').

- **Name**: The name attribute for the input. 

- **Label**: The label for the input.



You don't need to use the type, name and label keys to define these parameters.

**Example Input Definition:**



`['text', 'firstname', 'First Name' ]`



In the example above:

 - The first item (text) defines the type of the input - this will yield: `First Name`

 - Final html output will be:



 ```html

 


      First Name

      

    


 ```



## Input Validation

- **Validation**: Object specifying validation rules. This can include:

  - **Required**: Boolean to specify if the field is mandatory.

    - Example: `required: true`

  - **Minlength**: Specifies the minimum number of characters allowed.

    - Example: `minlength: 5`

  - **Maxlength**: Specifies the maximum number of characters allowed.

    - Example: `maxlength: 50`

  - **Pattern**: A regex pattern the input must match.

    - Example: `pattern: "/^[A-Za-z0-9]+$/"`



  ### Number Field Specific Validation:

  - **Min**: Specifies the minimum numeric value allowed.

    - Example: `min: 1`

  - **Max**: Specifies the maximum numeric value allowed.

    - Example: `max: 100`

  - **Step**: Specifies the increment step for numeric values.

    - Example: `step: 0.01` (for decimal increments)



**Formique will filter out any invalid validation defined and throw warnings on the browser console.E.g. when you define min and max validations (instead of minlength and maxlength) for a text field,  Formique will filter these out.**



## Input Attributes

- **Attributes**: Object specifying additional attributes like `id`, `class`, `style`, etc.

  - Example: `{ id: 'username', class: 'form-input', style: 'font-size: 13px;' }`



## Binding



- **Binding:** Optional binding syntax for dynamic data. The binding object has been moved to the attributes object, allowing for inclusion directly within the attributes. Two syntax formats are supported:

  - `binding: '::nameOfField'`

  - `binding: 'bind-value'`

  - Example: `'::inputName'` or `'bind-value'`  

    *Note:* `inputName` must be the value defined as the input name (the second item) in the input definition object.



## Options

- **Options**: For singleSelect,, multipleSelect, radio, and checkbox inputs. This is an array of options, each with a `value` and `label`.

  - Example: `[{ value: 'male', label: 'Male' }, { value: 'female', label: 'Female' }]`



### Selected Options

  For fields like singleSelect and multipleSelect you can also define default or pre selected options this way:  



  `[{ value: 'red', label: 'Red' }, { value: 'blue', label: 'Blue', selected: true }]`



  In the example given: the blue option will be selected by default.



## Installation



There are two primary ways to install and use Formique in your project: 



### Option A: Use Formique in a Browser Context (No Bundler Required)



1. **Include the CSS** in the head section of your HTML file:



    ```html

    

    ```



2. **Include the JavaScript** before the closing `