⚡️ The easiest way to build forms with Vue.

Overview

VueFormulate

npm GitHub

Documentation Website

What is Vue Formulate?

Vue Formulate is the easiest way to build forms with Vue. Please read the comprehensive documentation for live code examples and guidance on using Vue Formulate in your own projects.

Key features

😎 Developer happiness

Forms are everywhere, yet surprisingly tedious to author — well, not anymore. Vue Formulate provides a powerful and flexible API to developers that makes complex form creation a breeze.

☝️ A single input element

With Vue Formulate you don't need to remember the names of a dozen components — all form elements are created with a single component. Easy!

💪 Grouped fields

Vue Formulate ships with repeatable field groups out of the box. Create complex UIs such as multi-person booking forms with ease.

🎯 Built-in validation

Ridiculously easy validation out-of-the-box to handle 95% of use-cases. Help text, validation rules, and validation messages are simple props. Need more? You can add custom validations too.

🔌 Plugin system

Extend Vue Formulate's functionality or reuse custom inputs, validation rules, and messages across projects by tapping into the plugin system. Make your plugin open source to share with others!

Generate forms

Generate an entire form from JSON. Vue Formulate includes a schema to allow you to render complex forms from JSON with groups, wrappers, and custom components.

🎨 Styling Control

With provided class props you can add your own set of style classes globally or on a case-by-case basis. Tailwind? No problem. Bootstrap? You're covered. Roll your own? Right on, it’s supported.

🔍 Scoped Slots

Need even more control over your form’s markup? Vue Formulate ships with full scoped slots support so that you can globally or selectively provide your own markup.

🌐 Internationalization

Thanks to the wonderfully collaborative Vue community, Vue Formulate ships with support for over a dozen languages which are selectively importable to keep bundle size light.

These features and many more are covered thoroughly at the documentation website.

Contributing

Vue Formulate is and always will be free and open source. There are many ways available for you to contribute to Vue Formulate.

Core Codebase Contributors

This project exists thanks to all the people who volunteer their time to contribute

Localization Contributors

Vue Formulate is translated into different languages by volunteer native language speakers. Localizations are located in the Vue Formulate Internationalization repo.

License

MIT

Copyright (c) 2020-present, Braid LLC

Issues
  • Proposal: a class map for easy class manipulation.

    Proposal: a class map for easy class manipulation.

    Describe the new feature you'd like Proposed solution for allowing classes to be overriden on any sub-element of vue-formulate:

    The default would be something like:

    Vue.use(VueFormulate, {
      classmap: context => ({
        "outer": `formulate-input`,
        "outer-wrapper": `formulate-input-wrapper`,
        "element-wrapper": `formulate-input-element formulate-input-element--${context.type}`,
        "element": '',
        "help": "formulate-input-help",
        "errors": "formulate-input-errors",
        "error": "formulate-input-error"
      })
    }
    

    The idea is that classMap function would be defined globally for all inputs, and then each sub-type could override it, and then as granular as individual input fields could also override each:

    <FormulateInput
      type="text"
      classmap-element="form-input block w-full sm:text-sm sm:leading-5"
    />
    

    The idea is that the above solution would allow a developer to setup their own fields using a class-based ui framework and handle 90% of a project's form styles globally for all FormulateInput elements, and then on a case by case basis easily override the styles on a per-element basis, and lastly scoped slots as a nuclear option.

    I'll reiterate the goal of Vue Formulate is to make high quality form building fast and easy, so I we want to provide that 90% solution as painlessly as possible. 90% of inputs shouldn't require any additional configuration, scoped slot usage, etc.

    What percentage of vue-formulate users would benefit? Probably about 20%


    I'm looking for feedback from users of frameworks like Tailwind, Tachyons, or Bootstrap.

    future suggestions welcome 
    opened by justin-schroeder 35
  • Emit @keyup, @keydown, @click, @focus, @blur on FormulateInput from native inputs

    Emit @keyup, @keydown, @click, @focus, @blur on FormulateInput from native inputs

    Describe the new feature you'd like I would like to be able to listen for keypress events on a FormulateInput component. Perhaps I'm doing something wrong, but

    <FormulateInput
            type="text"
            placeholder="Test"
            v-model="test"
           @keyup.tab="someFunction"
    />
    

    does not trigger someFunction when the tab key is pressed. This is not limited to this key, I have tried other keys as well.

    What percentage of vue-formulate users would benefit? I don't know if this is a common use case, but in my case, I want to be able to trigger the creation of a new item when tab is pressed.

    future 
    opened by soullpoint 18
  • Can't submit form

    Can't submit form

    Hello Vue Formulate developers,

    I have the feeling that I miss something: I created a form with Vue Formulate and everything works fine except that if I click on submit button nothing happens.

    `

     <formulate-form
         action="https://api.staticforms.xyz/submit"
         method="post"
     >
     
         <formulate-input
          type="hidden"
          name="accessKey"
          value="[secret key]"
        >
        </formulate-input>
    
         <formulate-input
          type="hidden"
          name="redirectTo"
          value="[private address]"
        >
        </formulate-input>
    
        <formulate-input
          id="honeypot"
          type="text"
          name="honeypot"
        >
        </formulate-input>
     
        <formulate-input
          type="text"
          name="name"
          label="Naam"
          placeholder="Voer hier uw voor- en achternaam in"
          validation="required|max:50,length"
          :validation-messages="{
              required: 'Voer hier uw voor- en achternaam in.',
              max: 'De voor- en achternaam mogen samen niet langer zijn dan 50 tekens.'
          }"
        >
        </formulate-input>
    
        <formulate-input
          type="email"
          name="email"
          label="E-mailadres"
          placeholder="Voer hier uw e-mailadres in"
          validation="email|max:50,length"
          :validation-messages="{              
              email: 'Voer een geldig e-mailadres in.',
              max: 'Het e-mailadres mag niet langer zijn dan 50 karakters.'
          }"
        >
        </formulate-input>
    
        <formulate-input
          type="textarea"
          name="message"
          label="Bericht"
          placeholder="Voer hier uw bericht in"
          validation="required|max:1000,length"
          :validation-messages="{              
              required: 'Voer hier uw bericht in.',
              max: 'Het bericht mag niet langer zijn dan 1000 karakters.'
          }"
        >
        </formulate-input>
    
         <formulate-input
          type="submit"
          name="Verzenden"          
        >
        </formulate-input>
                       
    </formulate-form> 
    
    `

    For privacy concerns I removed the access key and private address in the code.

    Is there something missing in the above code? Is there something that I should add?

    I guess the action attribute should just work?

    opened by Verhoeckx 18
  • Events for a FormulateForm generated by a schema

    Events for a FormulateForm generated by a schema

    Describe the new feature you'd like Capture @click from type button in a FormulateForm generated by a schema. Alternatively be able to use multiple submit buttons in a schema and differentiate between the one @clicked. The @click is not processed by the FormulateForm and have tried looking for ways for adding the event listeners on mounted() but all looks messy. If I use multiple 'submits' the $event payload does not enable me to differentiate between the different submit buttons. I could clone the FormulateForm and add some functions - but would be great if I could capture a button click and read/process the properties from that. I am not sure if I am missing anything but dont see a way of doing this without ending up with a subpar solution.

    btw - love the library! tried a number but this seems the best with good documentation.

    What percentage of vue-formulate users would benefit? 80% - well all those wanting to use the FormuateForm with a schema.

    feature request future 
    opened by johnha 14
  • TypeScript support

    TypeScript support

    Any plans to support TypeScript?

    I see typescript in dependencies: https://github.com/wearebraid/vue-formulate/blob/master/package.json#L80

    But don't see any declarations 🙂

    P.S. Formulate looks like a great solution for building forms. Well documented, customizable, friendly API... I totally want to try it in my next application.

    feature request help wanted 
    opened by slavarazum 14
  • Theming and Field Groups

    Theming and Field Groups

    I worked through the documentation, and I have the following questions (in case I've missed something in the docs):

    • Field Groups: Is there an option to group fields together on a form? E.g. on a user profile form having a section for person details (fields for name, last name, etc), a section for profile (fields for user name, avatar image), section with contact details (fields for phone, email, etc)

    • Theming: the theming section in the docs mention that you can style the field elements using SCSS variables. Is it possible to use components from another UI library, e.g. Vue Ant Design?

    feature request help wanted question suggestions welcome 
    opened by go4cas 14
  • Array as options for select input

    Array as options for select input

    Is there an option to give an array as the input for the select input?

    For example, something like this

    FormulateInput v-model="value" :options="{Name 1, Name 2, Name 3, Name 4}" type="select" placeholder="Select a Name from the list"

    Basically the usecase is, I have a list of names fetched from database which is in an array format and user has to select a name from only that list. How can I use vueformulate in this case?

    feature request 
    opened by leokyohan 13
  • Add a new `optional` validation rule

    Add a new `optional` validation rule

    Describe the bug I am trying to create a form with an optional URL field. When applying the URL validation rule to this field, it automatically fails validation if the field remains empty. This occurs because isUrl rejects if passed an empty string. Note this occurs on both type="text" and type="url" fields. Because of this, optional text fields cannot be used in a form with URL validation.

    Link to the URL validation function, which rejects if passed an empty string (I tested this with that npm package): https://github.com/wearebraid/vue-formulate/blob/c6ffe1995be0df608c9c735186f4158662449fc8/src/libs/rules.js#L283

    You can actually see this bug on the validation documentation page. Upon page load, the URL validation field already has an error message because the field starts empty: https://vueformulate.com/guide/validation/#url

    To Reproduce https://codepen.io/mjlehrke/pen/jOWyyrq

    1. Create a URL or text field with FormulateInput
    2. Add URL validation with validation="url"
    3. Attempt to submit form with empty field
    4. It will fail validation

    Reproduction Submit empty fields in this codepen. It will automatically fail validation. https://codepen.io/mjlehrke/pen/jOWyyrq

    Expected behavior An optional text field with URL validation should not automatically fail validation if that optional field is empty. Bigger picture, any Formulate field should only go through validation if it is not empty or it has the 'required' rule.

    Thinking about this further, maybe there should be an 'optional' validation rule that bails out of validation if the field is empty? This would allow you to add validation to a field, but make that field optional, and only validate anything if it is not empty. (I can make a new feature request if needed)

    Screenshots Formulate Documentation

    If I duplicate a repeatable input group, it automatically fails validation Validation failure

    Device information:

    • Device: PC
    • OS: Windows 10
    • Browser: Firefox & Chrome
    • Version 2.4.0 (it was also happening in 2.3.8)
    feature request future 
    opened by mjlehrke 13
  • date format

    date format

    Is there an option to give the date format for vue-formulate? If it is not there it would be a really good option to give it. I was trying to give date format MM-DD-YYYY. But by default it i coming in DD-MM-YYYY format.

    feature request 
    opened by leokyohan 13
  • Select input with array options buggy

    Select input with array options buggy

    As originally highlighted in #250 - the hope was it was related to #244; I've updated to 2.4.4, but the bug still persists.

    Adding IDs doesn't make a difference. Changing the values to text rather than numbers does, but it's not practical.

    • If I select an option, the data updates.
    • If I then select an option that isn't 0, it doesn't update.

    However

    • If I select an option, the data updates.
    • If I then select 0, it updates.
    • If I then select another option, it updates. But only if the previous value was 0.
    bug report 
    opened by willans 12
  • Show error messages on blur after pending validations

    Show error messages on blur after pending validations

    When running validations with debounce rules there may be a delay between blur and the validations being processed. This causes the errors to change very soon after being made visible. Hence this PR waits for the pending validations to be ran before changing error visibility.

    opened by beornf 1
  • Customize option styling in select inputs

    Customize option styling in select inputs

    I want to customize options of the select input, using the global styling, I'm using tailwind css and I'm trying to centralize all the styling globally in forformulate.config.ts I wan to to work now on the select and improve their appearance by changing the options style, how can I do that globally? this is a snippet of the classes part from the global styling

        outer: 'mb-2',
        input(context) {
          if (context.classification == 'button')
            return 'flex items-center justify-center flex-1 h-full px-6 py-2 bg-indigo-600 shadow rounded-md text-white text-base font-medium leading-normal text-center focus:ring-2 focus:ring-indigo-300';
          if (context.classification == 'text')
            return 'shadow appearance-none border w-full rounded my-2 py-2 px-3 text-gray-700 leading-tight focus:outline-none  focus:ring focus:border-indigo-300 focus:ring-indigo-300 focus:shadow-outline';
          if (context.classification == 'textarea')
            return 'shadow appearance-none border w-full rounded  my-2 py-2 px-3 text-gray-700 leading-tight focus:outline-none  focus:ring focus:border-indigo-300 focus:ring-indigo-300 focus:shadow-outline';
          if (context.classification == 'box' && context.type == 'checkbox')
            return 'border-solid border-1 opacity-100 rounded outline-none ring-0 ring-transparent checked:border-transparent checked:bg-indigo-600';
          if (context.classification == 'box' && context.type == 'radio')
            return 'border-solid border-1 opacity-100 rounded-full outline-none ring-0 ring-transparent checked:border-transparent checked:bg-indigo-600';
          if (context.classification == 'select')
            return 'border rounded-md border-purple-100 bg-white rounded my-2 px-3 py-2 outline-none';
    
          return '';
        },
        wrapper(context) {
          switch (context.classification) {
            case 'box':
              return 'flex flex-shrink-0 justify-center items-center';
            default:
              return '';
          }
        },
        label(context) {
          switch (context.classification) {
            case 'text':
              return 'text-base font-bold leading-normal px-3';
            case 'textarea':
              return 'text-base font-bold leading-normal px-3 mb-4';
            case 'box':
              return ' flex justify-start items-start text-base leading-normal ml-2';
            default:
              return '';
          }
        },
        help: 'text-xs mb-1 text-gray-600 mt-1 ml-2',
        error(context) {
          switch (context.classification) {
            case 'text':
              return 'text-red-700 text-xs mt-1 ml-2';
            case 'textarea':
              return 'text-red-700 text-xs mt-1 ml-2';
            default:
              return 'text-red-700 text-xs mt-1 ml-2';
          }
        },
      },```
    
    
    
    
    
    
    bug report 
    opened by BennaceurHichem 0
  • Inconsistent submit data for file input - inside and outside group input

    Inconsistent submit data for file input - inside and outside group input

    Describe the bug Form submit data for a file input is [{"url": "https://example.com"}] when it's outside a group and the same will change to a complex object when it is inside a group.

    Example complex output: { context: (...) fileList: (...) files: (...) input: (...) options: (...) results: (...) supportsDataTransfers: (...) uploadPromise: (...) }

    Reproduction

    CodePen:

    https://codepen.io/megamind007/pen/YzVZWjx

    Expected behavior Expected submit data for file input inside group is: [{name: "sample.png" url: "FILE_URL"}]

    but getting { context: (...) fileList: (...) files: (...) input: (...) options: (...) results: (...) supportsDataTransfers: (...) uploadPromise: (...) }

    bug report 
    opened by suhasranganath 0
  • Add

    Add "schema" prop to FormulateInput

    I like the idea of using schemas with FormulateForm for generating form, but I believe that the step involved to generate the schema and working on it is not so easy. I think also mixing component objects with metadata field objects doesn't seems a big deal for big form (I'm thinking about data driven application you ma find in IoT for example)

    My suggestion is to provide a solution to both world providing automation and flexibility (UI side). What about adding a schema to FormulateInput?

    <template>
      <FormulateForm
        values="formValues"
      >
        <FormulateInput schema="my_schema.name"/>
        <FormulateInput schema="my_schema.email"/>
        <FormulateInput schema
          type="submit"
          label="Save account"
        />
      </FormulateForm>
    </template>
    

    This allow me to keep in sync all the properties of a specific field (less error prone) with the flexibility of custom / advanced layouts without touching the schema. Don't know if it's a good idea, just asking.

    feature request 
    opened by realnot 0
  • Passing custom input data properties into :validation-rules params

    Passing custom input data properties into :validation-rules params

    Discussed in https://github.com/wearebraid/vue-formulate/discussions/458

    Originally posted by BennaceurHichem July 3, 2021 I'm implementing a phoneInput that contain two parts, the first is the flag of the country, with the countryCode and dialCode, the second is the phone input, I want to create a custom validation that validates the phone number using an external library which libphonenumber-js. Th problem is that in the params passed into :validation-rules is the value only as I see in the doc : https://vueformulate.com/guide/validation/#custom-validation-rules

    How can I pass the countryCode which is a data property in the custol input, to the params of the :validation-rules prop, to use it for validation with libphonenumber-js like this :

     :validation-rules="{
            phoneValidation: ({ value,//here I shoul get the countryCode }) => {
              const pn = parsePhoneNumberFromString(value, //passcountryCode here for custom validation);
              return pn?.isValid() ? true : false;
            },
          }"
    ```</div>
    opened by BennaceurHichem 0
  • Input event fired twice on FormulateForm component

    Input event fired twice on FormulateForm component

    Hello :-)

    I've noticed that if I assign v-model to FormulateForm component then the input event is fired twice on every user action with the form.

    I've prepared two CodePens:

    1. https://codepen.io/krzysztofj/pen/bGWdKRV - here the problem occurs
    2. https://codepen.io/krzysztofj/pen/qBmdKML - here I've assigned v-model to every single FormulateInput component and it works properly.
    • Browser - tested on Chrome and Firefox
    • Version - 2.5.2
    bug report 
    opened by krzjablonski 0
  • V-model from computed prop, unexpected results

    V-model from computed prop, unexpected results

    Hello!

    I require a form input which converts a number to a string with commas (123456789 -> 123,456,789).

    Describe the bug When using the v-model with a computed prop (with getter and setter), the VueFormulate input does not allow inputting decimal points/periods, like 1,209.75

    I created a codepen that reproduces my issue: https://codepen.io/andrewbartz/pen/PomwLKK

    Works fine on a regular input, but not with the VueFormulate.

    Any ideas, suggestions, or workarounds?

    bug report 
    opened by andrewbartz 1
  • Performance drop when typing ( generating forms in firefox )

    Performance drop when typing ( generating forms in firefox )

    If i start wildy typing within the VueFormulate generated form, the performance becomes really bad after typing let's say 20 seconds. It look's this only happens in Firefox, with chrome and safari i don't have issues.

    Also with the example on https://vueformulate.com/guide/forms/generating-forms/ I don't see any performance drops.

    I published a repo to make sure this also happens with a fresh nuxt installation: [email protected]:merijnponzo/nuxt-formulate.git

    Sorry i just added the form to the logo component ;-) But just keeps typing in the textfield, and clear your field and type again, after let's say 20 seconds i clearly see a lagg. and after let's say 30 seconds it takes seconds before my characters shows up in the textfields

    nuxtformulate

    Device information: MacBook Pro (Retina, 13-inch, Early 2015) MacOS catalina Firefox 89.2

    bug report 
    opened by merijnponzo 0
  • Cant addmore item with limit 1

    Cant addmore item with limit 1

    Describe the bug When repeatable limit is set to 1 and the last item removed or have and empty default the addMore button is not showing so we can addMore item

    To Reproduce Steps to reproduce the behavior:

    1. Create repeatable group with limit set to 1
    2. remove
    3. Cant addMore item

    CodePen:

    https://codepen.io/nsetyo/pen/mdWYRxb

    Expected behavior Can add more item with limit 1

    It might related to this that make totalItems always 1 image_2021-06-22_06-00-15

    bug report 
    opened by nsetyo 1
  • fixed: Dynamic modification of file input values

    fixed: Dynamic modification of file input values

    In the actual development, we need to call the interface to return the data after the initialization of the form, and then transfer the data to the form. However, in this case, after the initialization of the file input values, it will cause problems, resulting in unable to upload the file. Therefore, submit the pull request and add a watch to the src/inputs/FormulateInputFile.vue file to reinitialize the model when it changes

    opened by tu6ge 0
Owner
Braid
Open source tools written by the team at Braid LLC.
Braid
⚡️ The easiest way to build forms with Vue.

Documentation Website What is Vue Formulate? Vue Formulate is the easiest way to build forms with Vue. Please read the comprehensive documentation for

Braid 1.7k Jul 21, 2021
Create conversational conditional-logic forms with Vue.js.

Create conversational conditional-logic forms with Vue.js.

DITDOT 392 Jul 22, 2021
Reforms.js - Vue 3 and Bootstrap 5 forms and cards generator

Reforms.js - Vue 3 and Bootstrap 5 forms and cards generator

EMPLA GROUP, LLP 6 May 13, 2021
JavaScript powered forms for Vue.js

Vue Formly Looking for maintainers It's been many years since I first created Vue Formly and it's been a great project. However, it was a project that

FormlyJS 230 Jul 19, 2021
Vuelidate form-group helper that extracts errors easily.

Vuelidate-error-extractor makes error message display from vuelidate a breeze. Be it for a single form element or all displaying all the errors in a form.

Dobromir Hristov 135 Jun 16, 2021
:clipboard: A schema-based form generator component for Vue.js

vue-form-generator A schema-based form generator component for Vue.js. Demo JSFiddle simple example CodePen simple example Features reactive forms bas

VueJS Generators 2.8k Jul 24, 2021
A reusable focus directive for reusable Vue.js components

vue-focus A reusable focus directive for reusable Vue.js components Overview It can be tricky to manage input focus. You always have to fall back to a

Denis Karabaza 413 Jul 20, 2021
International Telephone Input with Vue https://educationlink.github.io/vue-tel-input/

vue-tel-input International Telephone Input with Vue. Documentation and live demo Visit the website Getting started Install the plugin: npm install vu

EducationLink 463 Jul 22, 2021
GitHub buttons component for Vue.

Vue GitHub Buttons GitHub buttons component for Vue. Vue GitHub Buttons Installation Demo Usage Using with Nuxt Module options css useCache Using with

Saran Tanpituckpong ✔️ 33 Apr 24, 2021
A phone number input made with Vue JS (format & valid phone number)

vue-phone-number-input A beautiful text field to format phone numbers made with VueJS NEW VERSION ON MY NEW LIBRARY: MAZ-UI The new version of VuePhon

Mazel 441 Jul 18, 2021
Simplest custom checkbox possible.

Simplest custom checkbox possible.

Eliamar Tani 0 Jul 3, 2021
A configurable & lightweight Vue wrapper component that enables

vue-email-autocomplete A configurable & lightweight Vue wrapper component that enables "out of the box" email autocomplete/suggestions on input elemen

James Wylie 22 Jun 25, 2021
Clean & minimal vue form elements and form builder with validation

Vue Form Components Documentation https://antonreshetov.github.io/vue-form-components Install NPM Installing with npm is recommended and it works seam

Anton Reshetov 119 Jul 20, 2021
Vue autofocus directive

vue-autofocus-directive Autofocus directive for Vue About Lifted from the official Vue tutorial: https://vuejs.org/v2/guide/custom-directive.html When

Byteboomers 33 Jul 20, 2021