diff --git a/docs/custom-formkit-input/README.md b/docs/custom-formkit-input/README.md
index b5cc4958e..60631d871 100644
--- a/docs/custom-formkit-input/README.md
+++ b/docs/custom-formkit-input/README.md
@@ -2,12 +2,16 @@
 
 ## 原由
 
-目前不管是在 Console 中，还是在插件 / 主题设置表单中，都有可能选择系统当中的资源，所以可以通过自定义 FormKit 组件的方式提供常用的选择器。
+目前在 Console 端的所有表单都使用了 FormKit，但 FormKit 内置的 Input 组件并不满足所有的需求，因此需要自定义一些 Input 组件。此外，为了插件和主题能够更加方便的使用系统内的一些数据，所以同样需要自定义一些带数据的选择组件。
 
 ## 使用方式
 
 目前已提供以下类型：
 
+- `code`: 代码编辑器
+  - 参数
+    1. language: 目前支持 `yaml`, `html`, `css`, `javascript`, `json`
+    2. height: 编辑器高度，如：`100px`
 - `menuCheckbox`：选择一组菜单
 - `menuRadio`：选择一个菜单
 - `menuItemSelect`：选择菜单项
diff --git a/src/formkit/formkit.config.ts b/src/formkit/formkit.config.ts
index e98f40bb4..2c0fc28e4 100644
--- a/src/formkit/formkit.config.ts
+++ b/src/formkit/formkit.config.ts
@@ -4,6 +4,7 @@ import { createAutoAnimatePlugin } from "@formkit/addons";
 import { zh } from "@formkit/i18n";
 import type { DefaultConfigOptions } from "@formkit/vue";
 import { form } from "./inputs/form";
+import { code } from "./inputs/code";
 import { menuCheckbox } from "./inputs/menu-checkbox";
 import { menuRadio } from "./inputs/menu-radio";
 import { menuItemSelect } from "./inputs/menu-item-select";
@@ -21,6 +22,7 @@ const config: DefaultConfigOptions = {
   plugins: [createAutoAnimatePlugin()],
   inputs: {
     form,
+    code,
     menuCheckbox,
     menuRadio,
     menuItemSelect,
diff --git a/src/formkit/inputs/code/CodeInput.vue b/src/formkit/inputs/code/CodeInput.vue
new file mode 100644
index 000000000..40a6eca42
--- /dev/null
+++ b/src/formkit/inputs/code/CodeInput.vue
@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import type { FormKitFrameworkContext } from "@formkit/core";
+import { VCodemirror } from "@halo-dev/components";
+import type { PropType } from "vue";
+
+const props = defineProps({
+  context: {
+    type: Object as PropType<FormKitFrameworkContext>,
+    required: true,
+  },
+});
+
+const height = props.context.height as string;
+const language = props.context.language as string;
+
+const onChange = (value: string) => {
+  props.context.node.input(value);
+};
+</script>
+
+<template>
+  <VCodemirror
+    :model-value="props.context._value"
+    v-bind="context.attrs"
+    :height="height"
+    :language="language"
+    class="block w-full"
+    @change="onChange"
+  />
+</template>
diff --git a/src/formkit/inputs/code/index.ts b/src/formkit/inputs/code/index.ts
new file mode 100644
index 000000000..f42ccb9f9
--- /dev/null
+++ b/src/formkit/inputs/code/index.ts
@@ -0,0 +1,8 @@
+import { createInput } from "@formkit/vue";
+import CodeInput from "./CodeInput.vue";
+
+export const code = createInput(CodeInput, {
+  type: "input",
+  props: ["height", "language"],
+  forceTypeProp: "textarea",
+});