# @blueking/bkui-form

> 基于 bk-magic-vue 2.0组件库和JSON Schema协议的表单渲染器

Latest version **0.0.51** (published 2026-08-13) · ISC license · 0 weekly downloads

## Install

```sh
npm install @blueking/bkui-form
pnpm add @blueking/bkui-form
yarn add @blueking/bkui-form
bun add @blueking/bkui-form
```

## Health

**Score 55/100 (C)** — status: active.

Positive: no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads; no types; no esm support; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.0.51 |
| Published | 2026-08-13 |
| First published | 2022-07-08 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 12.16.3 |
| Dependencies | 8 |
| Unpacked size | 2.7 MB |
| Known vulnerabilities | 0 (+2 in 2 direct dependencies) |
| Install scripts | no |
| Maintainers | blueking-magicbox |

## Links

- npm: https://www.npmjs.com/package/@blueking/bkui-form
- npm.io page: https://npm.io/package/@blueking/bkui-form

## Dependencies (8)

- [ajv](https://npm.io/package/ajv.md) ^8.11.0
- [koa](https://npm.io/package/koa.md) ^2.7.0
- [vue](https://npm.io/package/vue.md) ^2.7.14
- [ajv-i18n](https://npm.io/package/ajv-i18n.md) ^4.2.0
- [koa-static](https://npm.io/package/koa-static.md) ^5.0.0
- [ajv-formats](https://npm.io/package/ajv-formats.md) ^2.1.1
- [bk-magic-vue](https://npm.io/package/bk-magic-vue.md) 2.5.10-beta.3
- [vue-template-compiler](https://npm.io/package/vue-template-compiler.md) ^2.7.14

## Recent versions

- 0.0.51 (latest) — 2026-08-13
- 0.0.42-beta.7 (beta) — 2024-06-26
- 1.0.3 — 2026-04-17
- 1.0.2 — 2026-04-03
- 1.0.0-beta.13 — 2026-04-03
- 1.0.0-beta.12 — 2026-04-03
- 1.0.0-beta.11 — 2026-03-31
- 1.0.1-beta.5 — 2026-02-04
- 1.0.1-beta.4 — 2026-02-02
- 1.0.1-beta.3 — 2026-02-02
- 1.0.1-beta.2 — 2026-02-02
- 1.0.1-beta.1 — 2026-02-02
- 1.0.0-beta.10 — 2026-01-20
- 1.0.0-beta.9 — 2026-01-16
- 1.0.0-beta.8 — 2026-01-15
- … 68 more at https://npm.io/package/@blueking/bkui-form/versions

## README

## 表单化渲染器

基于 bk-magic-vue 2.0组件库和JSON Schema协议的表单渲染器

**Vue3版本的在v1.0.x分支当中**

### 安装

依赖蓝鲸bk-magic-vue 2.0组件库，需要项目自己安装

```shell
npm i @blueking/bkui-form
```

### 使用

```vue
<template>
  <BkSchemaForm
    v-model="formData"
    ref="BkSchemaForm"
    :schema="schema"
    :layout="layout"
    :rules="rules"
    :form-type="formType"
    :context="context">
  </BkSchemaForm>
</template>
<script>
import createForm from '@blueking/bkui-form';
import '@blueking/bkui-form/dist/bkui-form.css';

const BkSchemaForm = createForm();

export default {
  name: 'Playground',
  components: { BkSchemaForm },
  data() {
    return {
      schema: {
        "title": "Widgets",
        "type": "object",
        "properties": {
          "stringFormats": {
              "type": "object",
              "title": "String formats",
              "required": [
                  "email",
                  "uri"
              ],
              "properties": {
                  "email": {
                      "title": "Email",
                      "type": "string",
                      "format": "email",
                      "ui:component": {
                        "props": {
                          "type": "email"
                        }
                      }
                  },
                  "uri": {
                      "title": "Uri",
                      "type": "string",
                      "format": "uri",
                      "ui:component": {
                        "props": {
                          "type": "url"
                        }
                      }
                  }
              }
          },
          "boolean": {
              "type": "object",
              "title": "Boolean field",
              "properties": {
                  "default": {
                      "type": "boolean",
                      "title": "checkbox (default)",
                      "description": "This is the checkbox-description"
                  },
                  "radio": {
                      "type": "boolean",
                      "title": "radio buttons",
                      "default": "false",
                      "description": "This is the radio-description",
                      "ui:component": {
                        "name": "radio"
                      }
                  }
              }
          },
          "string": {
              "type": "object",
              "title": "String field",
              "properties": {
                  "default": {
                      "type": "string",
                      "title": "text input (default)"
                  },
                  "textarea": {
                      "type": "string",
                      "title": "textarea",
                      "ui:component": {
                        "props": {
                          "type": "textarea",
                          "rows": 4
                        }
                      }
                  },
                  "integer": {
                      "type": "integer",
                      "title": "integer",
                      "default": 100086
                  },
                  "color": {
                      "type": "string",
                      "title": "color picker",
                      "format": "color",
                      "default": "#151ce6",
                      "ui:component": {
                        "name": "color"
                      }
                  }
              }
          },
          "disabled": {
              "type": "string",
              "title": "A disabled field",
              "default": "I am disabled.",
              "ui:component": {
                "props": {
                  "disabled": true
                }
              }
          },
          "readonly": {
              "type": "string",
              "title": "A readonly field",
              "default": "I am read-only.",
              "ui:component": {
                "props": {
                  "readonly": true
                }
              }
          },
          "widgetOptions": {
              "title": "widgetOptions",
              "type": "string",
              "default": "I am yellow",
              "ui:component": {
                "class": {
                  "bk-xxx": true
                },
                "style": {
                  "boxShadow": "0 0 6px 2px yellow"
                }
              }
          },
          "selectWidgetOptions": {
              "title": "selectWidgetOptions",
              "type": "string",
              "enum": [
                  "foo",
                  "bar"
              ]
          }
        }
      },
      layout: [],
      formData: {},
      formType: 'vertical',
      rules: {},
      context: {
        baseURL: '',
      }
    };
  },
  methods: {
    async validateBkForm() {
      const valid = this.$refs.BkSchemaForm.validateForm();
      console.log(valid)
    },
    validateBkFormItem() {
      this.$refs.BkSchemaForm.validateFormItem('stringFormats');
    },
  },
};
</script>
```

---
_Source: https://npm.io/package/@blueking/bkui-form · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._