1<FormKit type="form" v-model="data">
2    <FormKit type="el-rate" label="elFormRate" name="rate" form-item/>
3
4    <FormKit type="el-rate" label="elRate" name="rate" help="help text" />
5
6    <FormKit type="el-rate" label="elRate" name="rate" :texts="['oops', 'disappointed', 'normal', 'good', 'great']"
7        show-text />
8
9    <FormKit type="el-rate" label="elRate (allow-half)" name="rate_half" allow-half />
10</FormKit>

Custom template of select options

1<script setup>
2import { ref } from "vue";
3const data = ref({});
4   
5const cities = [
6    {
7        value: 'Beijing',
8        label: 'Beijing',
9    },
10    {
11        value: 'Shanghai',
12        label: 'Shanghai',
13    },
14    {
15        value: 'Nanjing',
16        label: 'Nanjing',
17    },
18    {
19        value: 'Chengdu',
20        label: 'Chengdu',
21    },
22    {
23        value: 'Shenzhen',
24        label: 'Shenzhen',
25    },
26    {
27        value: 'Guangzhou',
28        label: 'Guangzhou',
29    },
30]
31
32</script>
33<template>
34  <FormKit type="el-select" label="select (Custom template)" name="input1" :options="cities">
35      <template #option="{ item }">
36          <span style="float: left">{{ item.label }}</span>
37          <span style="
38              float: right;
39              color: var(--el-text-color-secondary);
40              font-size: 13px;
41              ">{{ item.value }}
42          </span>
43      </template>
44  </FormKit>
45<template>

1<FormKit type="group" v-model="data">
2  <FormKit type="el-date-picker" label="el-date-picker" name="date1" validation="required" />
3  <FormKit type="el-date-range-picker" label="el-date-range-picker" name="date2" />
4</FormKit>

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

1<FormKit type="group" v-model="data">
2  <FormKit type="el-time-picker" label="el-time-picker" name="time1" />
3  <FormKit type="el-time-picker" label="el-time-picker (range)" name="time2" is-range />
4</FormKit>

1<script setup>
2import { ref } from "vue";
3const data = ref({})
4const createFilter = (queryString) => {
5    return (restaurant) => {
6        return (
7            restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
8        )
9    }
10}
11
12const restaurants = ref([
13    { value: 'vue', link: 'https://github.com/vuejs/vue' },
14    { value: 'element', link: 'https://github.com/ElemeFE/element' },
15    { value: 'cooking', link: 'https://github.com/ElemeFE/cooking' },
16    { value: 'mint-ui', link: 'https://github.com/ElemeFE/mint-ui' },
17    { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
18    { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
19    { value: 'babel', link: 'https://github.com/babel/babel' },
20])
21
22let querySearch = (queryString, cb) => {
23    const results = queryString
24        ? restaurants.value.filter(createFilter(queryString))
25        : restaurants.value
26    // call callback function to return suggestions
27    cb(results)
28}
29
30</script>
31<template>
32
33
34    <pre wrap>{{ data }}</pre>
35    <FormKit type="group" v-model="data">
36        <FormKit type="el-autocomplete" label="el-autocomplete" name="value1" placeholder="Please Input"
37            :fetch-suggestions="querySearch" />
38    </FormKit>
39
40
41
42</template>

1<script setup>
2import { ref } from "vue";
3const data = ref({})
4</script>
5
6<template>
7    <pre wrap>{{ data }}</pre>
8    <FormKit type="group" v-model="data">
9        <FormKit type="el-upload" label="elUpload" name="upload">
10            <el-button type="primary" size="small">select file</el-button>
11        </FormKit>
12
13        <FormKit type="el-upload" label="elFormUpload" name="upload1" form-item>
14            <el-button type="primary" size="small">select file</el-button>
15        </FormKit>
16    </FormKit>
17</template>

1<script setup>
2import { ref } from 'vue'
3let form = ref({})
4
5let data = [{
6    label: "Level one 1",
7    value: 1,
8
9    children: [{
10        label: "Level two 1-1",
11        value: 2,
12        children: [{
13            label: "Level three 1-1-1",
14            value: 3
15        }, {
16            label: "Level three 1-1-2",
17            value: 4
18        }, {
19            label: "Level three 1-1-3",
20            value: 5
21        }]
22    }]
23
24}]
25</script>
26
27<template>
28    <form-kit type="form" v-model="form">
29        <form-kit type="el-tree-select" name="treeselect" :data="data" label="el-tree-select" :render-after-expand="false" />
30
31        <form-kit type="el-tree-select" name="treeselect2" :data="data" label="el-tree-select (checkbox)" show-checkbox :render-after-expand="false" />
32
33        <form-kit type="el-tree-select" name="treeselect3" :data="data" label="el-tree-select (multiple)" multiple :render-after-expand="false" />
34    </form-kit>
35</template>
36