svelte-formique

v0.1.1

Published

a year ago

0High
0Medium
0Low

gugulethu_nyoni

svelte form builder formique UI web

Svelte-Formique

About Formique

Formique is a robust and elegant Web Content Accessibility Guidelines (WCAG) and Web Accessibility Initiative - Accessible Rich Internet Applications (WAI-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. This guide covers implementing Formique in Svelte.

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.

How to Install Formique in Svelte

Step 1: Install Svelte or SvelteKit

Create a new Svelte project using the following commands:

# create a new project in the current directory
npx sv create

# create a new project in my-app
npx sv create my-app

Select the following options:

SvelteKit minimal (optional but preferred)
Type checking with TypeScript (optional but preferred)
ESLint (optional but preferred)
npm (required)

Note: Always refer to the latest official Svelte guide on how to create a Svelte app, as this may change. Svelte Documentation: Creating a Project

Developing

npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open

Demo: Creating a New Route in Svelte for Formique

Step 1: Create a New Route

For demo purposes, let's create a new route (page) in src/routes/registration.

Create the Route:
- Create a new directory for the route:
```
mkdir src/routes/registration
```
Create the Svelte Page:
- Inside the route directory, create a new Svelte page:
```
touch src/routes/registration/+page.svelte
```

Step 2: Add the CSS

Paste the following Formique CSS in the <head> section of src/app.html:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/formique.min.css" formique-style>

Step 3: Install `svelte-formique`

To use Formique in your Svelte application, you need to install the svelte-formique package.

npm i svelte-formique

Step 4: Implement the Form in `+page.svelte`

Add the following code to +page.svelte:

<script>
  import { onMount } from 'svelte';
  import Formique from 'svelte-formique';

  // Define the form schema
  const formSchema = [
    ['text', 'name', 'Name', { required: true }],
    ['text', 'surname', 'Surname', { required: true }],
    ['email', 'email', 'Email', { required: true }],
    ['singleSelect', 'title', 'Title', { required: true }, { dependents: ['status'] },
      [
        { value: 'mr', label: 'Mr' },
        { value: 'ms', label: 'Ms' },
        { value: 'mrs', label: 'Mrs' },
        { value: 'dr', label: 'Dr' },
        { value: 'prof', label: 'Prof' }
      ]
    ],
    ['singleSelect', 'status', 'Status', { required: true }, { dependsOn: 'title', condition: 'prof' },
      [
        { value: 'full professor', label: 'Full Professor' },
        { value: 'associate professor', label: 'Associate Professor' }
      ]
    ],
    ['submit', 'submit', 'Submit', {}, { style: 'width: 100%;' }],
  ];

  // Define form parameters
  const formParams = {
    id: "regForm",
    method: "POST",
  };

  // Define form settings
  const formSettings = {
    submitOnPage: true,
    theme: "midnight-blush",
    requiredFieldIndicator: true,
    placeholders: true,  
  };

  // Initialize the form on component mount
  onMount(() => {
    const form = new Formique(formSchema, formParams, formSettings);
  });
</script>

<!-- Target element where the form will be inserted -->
<div id="formique"></div>

Step 5: View the Form

To see the form in your browser, run the following command:

npm run dev

Once the server is running, you can view the form at:

http://localhost:5173/registration

Note If you want to use a custom target element (form container) ID, you can do so by adding the item (property) containerId: 'element-id' in the formSettings object. This is particularly useful when you need to implement multiple Formique forms on a single page. Also, note that if the target element's ID is 'formique', you do not need to declare this item (property) in the formSettings object.

For more comprehensive details on Formique's features and usage and options visit the Formique GitHub Repository.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme