FormKit element

Element plus for FormKit.

Most of the components are based on Element plus, attributes directly pass to the element plus component.

Preview

Setup

1. This library require Element plus and FormKit to be installed.

If you are using nuxt, you can use FormKit nuxt module to install FormKit.

2. Create formkit.config.ts if using nuxt

import{DefaultConfigOptions}from'@formkit/vue'import{createElementPlugin}from'formkit-element'constconfig: DefaultConfigOptions={plugins: [createElementPlugin()]}

1. or direct setup in main.ts

constapp=createApp(App);import{plugin,defaultConfig}from'@formkit/vue'import{createElementPlugin}from"formkit-element";app.use(plugin,defaultConfig({plugins: [createElementPlugin()]}))

Usage

Basic

<FormKittype="form" v-model="data"><FormKittype="el-input" name="input4" label="el-input" validation="required" /><FormKittype="el-input" name="input5" label="el-input (placeholder)" validation="required"
placeholder="this is a placeholder" clearable/><FormKittype="el-password" name="password1" label="el-password" validation="required" show-passwordclearableplaceholder="this is a password" /><FormKittype="el-textarea" name="textarea" label="el-textarea" placeholder="this is a textarea" /><FormKittype="el-select" name="select2" label="el-select" clearable:options="{ mercury: 'Mercury', venus: 'Venus', earth: 'Earth', mars: 'Mars', jupiter: 'Jupiter', saturn: 'Saturn', uranus: 'Uranus', neptune: 'Neptune' }" /><FormKittype="el-select" name="select2" label="el-select (multiple)" :options="{ mercury: 'Mercury', venus: 'Venus', earth: 'Earth', mars: 'Mars', jupiter: 'Jupiter', saturn: 'Saturn', uranus: 'Uranus', neptune: 'Neptune' }" multiple/><FormKittype="el-rate" name="rate2" label="el-rate" /><FormKittype="el-switch" name="switch3" label="el-switch" /><FormKittype="el-date-picker" name="date3" label="el-date-picker" /><FormKittype="el-time-picker" name="time2" label="el-time-picker" /><FormKittype="el-color-picker" name="color12" label="el-color-picker" /></FormKit>

When using attributes `form-item` the component will be wrapped in a el-form-item component.

el-form-item preivew

<FormKittype="el-form"v-model="data"ref="elf"id="elform"><FormKittype="el-input"label="input3"name="input3"validation="required"placeholder="testing3"clearableform-item/><FormKittype="el-select"label="Select"name="select" :options="{
mercury: 'Mercury',venus: 'Venus',earth: 'Earth',mars: 'Mars',jupiter: 'Jupiter',saturn: 'Saturn',uranus: 'Uranus',neptune: 'Neptune',}" validation="required"clearableplaceholder="select placeholder"filterablemultipleform-item/><FormKittype="el-checkbox"label="Checkbox1"name="cb1"validation="required"form-item/><FormKittype="el-rate"label="Rate"name="rate1"form-item/><FormKittype="el-switch"label="Switch"name="switch1"form-item/><FormKittype="el-time-picker"label="Time Picker 1"name="time_picker_1"form-item/><FormKittype="el-input-number"label="input nubmer 1"name="input_number_1"form-item/><FormKittype="el-radio-group"label="Radio Group"name="radio1" :options="{
mercury: 'Mercury',venus: 'Venus',earth: 'Earth',mars: 'Mars',jupiter: 'Jupiter',saturn: 'Saturn',uranus: 'Uranus',neptune: 'Neptune',}" validation="required"form-item/><FormKittype="el-slider"label="Slider1"name="slider1"/><FormKittype="el-slider" label="Slider2" name="slider2" :min="100" :max="200" :step="2" /><FormKittype="el-color-picker" label="ColorPicker" name="color1" /></FormKit>

Supported type

el-cascader

el-rate

<FormKittype="form" v-model="data"><FormKittype="el-rate" label="elFormRate" name="rate" form-item/><FormKittype="el-rate" label="elRate" name="rate" help="help text" /><FormKittype="el-rate" label="elRate" name="rate" :texts="['oops', 'disappointed', 'normal', 'good', 'great']"
show-text/><FormKittype="el-rate" label="elRate (allow-half)" name="rate_half" allow-half/></FormKit>

el-select

Custom template of select options

<scriptsetup>import{ref}from"vue";constdata=ref({});constcities=[{value: 'Beijing',label: 'Beijing',},{value: 'Shanghai',label: 'Shanghai',},{value: 'Nanjing',label: 'Nanjing',},{value: 'Chengdu',label: 'Chengdu',},{value: 'Shenzhen',label: 'Shenzhen',},{value: 'Guangzhou',label: 'Guangzhou',},]</script><template><FormKittype="el-select" label="select (Custom template)" name="input1" :options="cities"><template#option="{ item }"><spanstyle="float: left">{{ item.label }}</span><spanstyle=" float: right; color: var(--el-text-color-secondary); font-size: 13px;">{{ item.value }}
</span></template></FormKit><template>

el-date-picker and el-date-range-picker

<FormKittype="group" v-model="data"><FormKittype="el-date-picker" label="el-date-picker" name="date1" validation="required" /><FormKittype="el-date-range-picker" label="el-date-range-picker" name="date2" /></FormKit>

el-switch

<FormKittype="group" v-model="data"><FormKittype="el-switch" label="el-switch" name="switch1" /><FormKittype="el-switch" label="el-switch (size)" name="switch2" size="large" /><FormKittype="el-switch" name="swtich3" active-text="Pay by month" inactive-text="Pay by year" /></FormKit>

el-time-picker

<FormKittype="group" v-model="data"><FormKittype="el-time-picker" label="el-time-picker" name="time1" /><FormKittype="el-time-picker" label="el-time-picker (range)" name="time2" is-range/></FormKit>

el-autocomplete

<scriptsetup>import{ref}from"vue";constdata=ref({})constcreateFilter=(queryString)=>{return(restaurant)=>{return(restaurant.value.toLowerCase().indexOf(queryString.toLowerCase())===0)}}constrestaurants=ref([{value: 'vue',link: 'https://github.com/vuejs/vue'},{value: 'element',link: 'https://github.com/ElemeFE/element'},{value: 'cooking',link: 'https://github.com/ElemeFE/cooking'},{value: 'mint-ui',link: 'https://github.com/ElemeFE/mint-ui'},{value: 'vuex',link: 'https://github.com/vuejs/vuex'},{value: 'vue-router',link: 'https://github.com/vuejs/vue-router'},{value: 'babel',link: 'https://github.com/babel/babel'},])letquerySearch=(queryString,cb)=>{constresults=queryString
? restaurants.value.filter(createFilter(queryString))
: restaurants.value// call callback function to return suggestionscb(results)}</script><template><prewrap>{{ data }}</pre><FormKittype="group" v-model="data"><FormKittype="el-autocomplete" label="el-autocomplete" name="value1" placeholder="Please Input"
:fetch-suggestions="querySearch" /></FormKit></template>

el-upload

<scriptsetup>import{ref}from"vue";constdata=ref({})</script><template><prewrap>{{ data }}</pre><FormKittype="group" v-model="data"><FormKittype="el-upload" label="elUpload" name="upload"><el-buttontype="primary" size="small">select file</el-button></FormKit><FormKittype="el-upload" label="elFormUpload" name="upload1" form-item><el-buttontype="primary" size="small">select file</el-button></FormKit></FormKit></template>

el-tree-select

<scriptsetup>import{ref}from'vue'letform=ref({})letdata=[{label: "Level one 1",value: 1,children: [{label: "Level two 1-1",value: 2,children: [{label: "Level three 1-1-1",value: 3},{label: "Level three 1-1-2",value: 4},{label: "Level three 1-1-3",value: 5}]}]}]</script><template><form-kittype="form" v-model="form"><form-kittype="el-tree-select" name="treeselect" :data="data" label="el-tree-select" :render-after-expand="false" /><form-kittype="el-tree-select" name="treeselect2" :data="data" label="el-tree-select (checkbox)" show-checkbox:render-after-expand="false" /><form-kittype="el-tree-select" name="treeselect3" :data="data" label="el-tree-select (multiple)" multiple:render-after-expand="false" /></form-kit></template>

• el-checkbox
• el-color-picker
• el-input
• el-input-number
• el-password
• el-radio-group
• el-slider
• el-textarea
• el-time-select
• el-form
• el-transfer
• el-checkbox-group
• el-tree

el-form submit

Due to the limitation of vue3, the submit event of el-form is not supported. You can use the submit attribute of FormKit to submit the form.

constdata=ref({})letonSubmit=()=>{console.log('submited')}

<FormKittype="el-form" v-model="data" :submit="onSubmit">
... </FormKit>