FormKit Inputs
A collection of some additional input types to use with FormKit. Most of these additional input types are based on my personal needs, but feel free to submit PRs to add more.
How to use
Install the package
In order to use this package you have to install it first, use your preferred package manager to install it.
npm install @kgierke/formkit-inputs
Setup the package
After you've installed the package it's time to set it up. The minimal setup requires you only to import the createFormKitInputsPlugin function and use the resulting output as plugin in your FormKit configuration. Below is an example of the minimal setup.
import createApp from "vue";
import App from "./App.vue";
import { defaultConfig, plugin } from "@formkit/vue";
import { createFormKitInputsPlugin } from "@kgierke/formkit-inputs";
const formKitInputPlugin = createFormKitInputsPlugin();
const app = createApp(App);
app
.use(
plugin,
defaultConfig({
plugins: [formKitInputPlugin],
})
)
.mount("#app");
Passing options
The createFormKitInputsPlugin function accepts an optional options argument. The following options are available:
{
/**
* To use the image input type with an automatic upload function
* you have to pass an uploadHandler function.
* This can also be passed as a property to the `image` input type.
*
* The uploadHandler receives the HTML5 `File` object
* as first argument and expects an src string as return value.
*/
uploadHandler: (file: File) => Promise<string> | string,
}
Included Inputs
Image
The image input type is an alternative to the file input type. It allows you to upload images and have a preview directly in the form. It also allows you to individually add and remove images (Possible with the multiple property). It is also possible to directly upload images to your server once they are selected and block the form from submitting until the upload is finished. To do so you have to pass an uploadHandler function as property or through the global configuration. The uploadHandler receives the HTML5 File object as first argument and expects an src string as return value.
<template>
<FormKit type="form">
<FormKit
type="image"
name="image"
label="Image"
multiple
uploadHandler="uploadHandler"
/>
FormKit>
template>
<script setup lang="ts">
import { FormKit } from "@formkit/vue";
const uploadHandler = async (file: File) => {
const formData = new FormData();
formData.append("file", file);
const response = await fetch("/upload", {
method: "POST",
body: formData,
});
return response.url;
};
script>
2.3k Dec 23, 2022
16 Dec 6, 2022
16 Dec 28, 2022
3 Sep 21, 2022
82 Jan 8, 2023
5 Nov 22, 2022
2 Oct 12, 2022
12 Oct 12, 2022
14 May 26, 2022
220 Nov 7, 2022
24 Nov 29, 2022
33 Nov 27, 2022
7 May 31, 2022
45 Jan 4, 2023
5 Nov 7, 2022
57 Nov 18, 2022
19 Dec 22, 2022
22 Jan 3, 2023
14 Dec 17, 2022
3 Jun 12, 2022