The Ultimate Form Builder for JavaScript Purists

Supports a wide range of input field types, including dynamic dropdowns and nested conditional logic.

Write Robust HTML Forms
in Pure JavaScript

Start using Formique now

Visit our comprehensive documentation on GitHub.

Welcome to FormiqueJS

Formique is a robust and elegant Web Content Accessibility Guidelines (WCAG) and Accessible Rich Internet Applications (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 primarily built for the Semantq JS Framework but seamlessly integrates with Vanilla JS, React, Vue, Angular, and Svelte.

Nested Conditionality

FormiqueJS can show or hide fields based on user input in real-time. Define conditions in your form schema for a personalized, intuitive experience without extra code.

Dynamic Drop Downs

Cascading dropdowns update automatically based on user selection. FormiqueJS simplifies multi-level selects, reducing the need for complex scripts.

JS-Driven Theme Colors

Easily adjust theme colors through JavaScript, ensuring your form matches your app’s design with no static CSS changes required.

Accessibility

FormiqueJS ensures all your forms are ARIA Label and WCAG compliant off the bat, meeting global accessibility standards. Build inclusive, user-friendly forms effortlessly and provide equal access to all users, including those with disabilities.

Efficiency

Save valuable development time with FormiqueJS. Focus on functionality rather than form styling and boilerplate, as our library allows you to craft high-UX, robust forms without delving into the complexities of CSS and HTML.

Integration

FormiqueJS works seamlessly with Pure JavaScript, Semantq, Vue, React, Svelte, and Angular. Our comprehensive implementation guides ensure smooth integration in your preferred framework.

Conditionality Logic

Formique’s conditional logic allows you to create dynamic forms by defining dependencies between fields. Simply:

  • Identify the parent field in your schema.
  • List the dependent fields (by name attribute) in an array.
  • Add a ‘dependsOn’ attribute to the dependent fields’ schema, specifying the parent field’s name.
  • Define the condition that must be met for the dependent field to be displayed.

This powerful feature enables you to create adaptive forms that respond to user input, streamlining the user experience and reducing form complexity.

Dynamic DropDowns

Formique enables the creation of dynamic dropdowns, allowing sub-options to be displayed based on selections in a primary dropdown. A typical use case is country-state reactivity, where states are dynamically shown based on the selected country. Common use cases include:

  • Country and state selection
  • Product categories and subcategories
  • Service types and related options

This feature enhances user experience by providing relevant options, streamlining the form completion process, and reducing errors.

FormiqueJS Features

Nested conditional logic for complex form scenarios
Dynamic selects show fields based on defined options and suboptions
Supports a wide range of input types for versatility
Input attributes and inline validation capabilities
Dynamic inputs adapt to user inputs effortlessly
Framework-agnostic design for broad compatibility
Built-in ARIA and WCAG compliance for accessibility and inclusivity
Lightweight codebase enhances overall application speed
Clean and concise schema structure for input fields
Seamless dynamic data binding for real-time updates
Customisable input validation and attributes
Clear error handling with informative user feedback
Flexible installation process for quick and easy setup
Structured form schema promotes maintainability and clarity
ARIA label compliant forms enhance accessibility
In-built JS-driven color schemes for consistent styling
Capability to set form parameters for tailored behavior
Declarative syntax for simplified and intuitive form creation
Granular and inline css capabilities for the form and each input

What Formique is Best Suited For

Formique is ideal for developers creating dynamic, accessible forms. It offers features like nested conditional logic, dynamic selects (drop downs), ARIA and WCAG compliant mark up, customizable JS driven color schemes , and easy parameter setup, over 23 input field types supported and a streamlined form creation with minimal effort.

Visit Our Docs

Ready to simplify your form creation process? Get started with Formique today and build dynamic, accessible forms effortlessly.

Explore our documentation now!

Get Started with Formique
Scroll to Top