@vue-toolkit/forms
Completely style-able, fully accessible form UI components, built with Vue.
Features
-
🚀 Vue components with minimal styles -
🎉 Fully accessible -
🎨 Sass variables -
📂 BEM class names -
💪 Written in TypeScript
Installation
npm install --save @vue-toolkit/forms @vue-toolkit/common
Vue Toolkit requires
@vue/composition-api
>= v1.1
Usage
import Vue from 'vue';
import Common from '@vue-toolkit/common';
import Forms from '@vue-toolkit/forms';
Vue.use(Common);
Vue.use(Forms);
Optionally, import the minimal default Sass styles:
@import '@vue-toolkit/forms/sass/components';
Validators
A validator is a function that processes a value and returns error information or null. A null
return value means that validation has passed.
Built-in Validators
import { validators } from '@vue-toolkit/forms';
Validator | Description |
---|---|
email |
Requires the value pass an email validation test. |
maxLength |
Requires the length of the value to be less than or equal to the provided maximum length. |
max |
Requires the value to be less than or equal to the provided number. |
minLength |
Requires the length of the value to be greater than or equal to the provided minimum length. |
min |
Requires the value to be greater than or equal to the provided number. |
pattern |
Requires the value to match a regex pattern. |
required |
Requires the value to be non-empty. |
Custom Validators
const mustBeAwesome = (value) => {
return value.includes('awesome') ? null : { awesome: true };
};
Credits
@vue-toolkit/forms
is a project by TSG, a full-service digital agency taking software from concept to launch.
Our powerhouse team of designers and engineers build iOS, Android, and web apps across many industries.