svelte-easyforms
A very opinionated form library for Svelte. Currently only supports inputs and textarea.
Usage:
; const emailValidator = /^@$/; const inputs = name: "name" title: "Who are you ?" placeholder: "Name, company, etc..." name: "email" title: "What's your email?" placeholder: "Email..." type: "email" validator: emailValidator name: "message" title: "Your message" placeholder: "Write your message here..." full: true multiline: true ; const submitForm = { console;};
And your HTML:
<Form inputs buttonText="SEND MESSAGE" on:submit="{submitForm}" reset />
Options: Each input object takes a couple of options
- name
- initialValue
- title (shows up above the input)
- placeholder
- type (defaults to "text")
- validator (optional, should return true if the value passes)
- multiline (optional, turns input into textarea)
- full (optional, makes the field span the whole form, instead of half)
- errorMessage (optional, shows up if there is an error)
- textareaHeight (optional, used with multiline, specifies how large the textarea field should be to begin with)
- font (optional, specifies font)
The Form itself takes a number of props:
- inputs (an array of inputs)
- buttonText (optional)
- reset (optional, makes the resetbutton appear)
- resetText (optional, changes the text on the reset button)
- debug (optional, displays the values, touched and errors objects)