{
 "slug": "form",
 "mode": "scenarios",
 "examples": [
  {
   "id": "form-ex-1",
   "title": "默认与常用变体",
   "titleSrc": "demo",
   "desc": "",
   "html": "<div class=\"demo-block\">\n  <div class=\"row kole-form\">\n    <form class=\"kole-form-form\" id=\"kole-form-form\">\n      <label class=\"kole-form-field\">\n        <span>\n          名称\n          <b aria-hidden=\"true\">*</b>\n        </span>\n        <input class=\"kole-form-control\" name=\"name\" required value=\"示例项目\" />\n      </label>\n      <span class=\"kole-form-error\" hidden>请输入名称</span>\n      <div class=\"kole-form-row\">\n        <button class=\"kole-form-button kole-form-primary\" type=\"submit\">提交</button>\n        <button class=\"kole-form-button\" type=\"reset\">重置</button>\n      </div>\n    </form>\n  </div>\n</div>",
   "preview": {
    "show": [
     [
      0,
      2
     ]
    ],
    "hide": [
     [
      1
     ],
     [
      0,
      0
     ],
     [
      0,
      1
     ],
     [
      0,
      3
     ],
     [
      0,
      2,
      0
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<div class=\"kole-form\">\n  <form class=\"kole-form-form\">\n    <label class=\"kole-form-field\">\n      <span>\n        名称\n        <b aria-hidden=\"true\">*</b>\n      </span>\n      <input class=\"kole-form-control\" name=\"name\" required value=\"示例项目\" />\n    </label>\n    <span class=\"kole-form-error\" hidden>请输入名称</span>\n    <div class=\"kole-form-row\">\n      <button class=\"kole-form-button kole-form-primary\" type=\"submit\">提交</button>\n      <button class=\"kole-form-button\" type=\"reset\">重置</button>\n    </div>\n  </form>\n</div>",
    "jsx": "import { useState } from 'react';\nimport { KoleForm } from 'kole-ui/react';\n\nexport default function ProjectForm() {\n  const [error, setError] = useState('');\n\n  // 与演示页同一套校验：名称为空时给出「请输入名称」\n  return (\n    <KoleForm\n      label=\"名称\"\n      required\n      error={error}\n      onSubmit={(e) => {\n        const name = e.target.elements.name.value.trim();\n        setError(name ? '' : '请输入名称');\n      }}\n    />\n  );\n}",
    "vue3": "<script setup>\nimport { ref } from 'vue';\nimport { KoleForm } from 'kole-ui/vue3';\n\nconst error = ref('');\n\nfunction onSubmit(e) {\n  const name = e.target.elements.name.value.trim();\n  error.value = name ? '' : '请输入名称';\n}\nfunction resetError() { error.value = ''; }\n</script>\n\n<template>\n  <!-- label / required 渲染字段与必填星号，error 非空时显示校验提示 -->\n  <KoleForm label=\"名称\" required :error=\"error\" @submit=\"onSubmit\" @reset=\"resetError\" />\n</template>",
    "vue2": "<template>\n  <KoleForm label=\"名称\" required :error=\"error\" @submit=\"onSubmit\" @reset=\"resetError\" />\n</template>\n\n<script>\nimport { KoleForm } from 'kole-ui/vue2';\n\nexport default {\n  name: 'FormDemo',\n  components: { KoleForm },\n  data() { return { error: '' }; },\n  methods: {\n    onSubmit(e) {\n      const name = e.target.elements.name.value.trim();\n      this.error = name ? '' : '请输入名称';\n    },\n    resetError() { this.error = ''; },\n  },\n};\n</script>",
    "tsx": "import { useState } from 'react';\nimport { KoleForm } from 'kole-ui/react';\n\nexport default function ProjectForm(): JSX.Element {\n  const [error, setError] = useState<string>('');\n\n  // 与演示页同一套校验：名称为空时给出「请输入名称」\n  return (\n    <KoleForm\n      label=\"名称\"\n      required\n      error={error}\n      onSubmit={(e) => {\n        const name = e.target.elements.name.value.trim();\n        setError(name ? '' : '请输入名称');\n      }}\n    />\n  );\n}",
    "vue3ts": "<template>\n\n  <!-- label / required 渲染字段与必填星号，error 非空时显示校验提示 -->\n  <KoleForm label=\"名称\" required :error=\"error\" @submit=\"onSubmit\" @reset=\"resetError\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleForm } from 'kole-ui/vue3';\n\nconst error = ref<string>('');\n\nfunction onSubmit(e) {\n  const name = e.target.elements.name.value.trim();\n  error.value = name ? '' : '请输入名称';\n}\nfunction resetError() { error.value = ''; }\n</script>",
    "vue2ts": "<template>\n\n  <KoleForm label=\"名称\" required :error=\"error\" @submit=\"onSubmit\" @reset=\"resetError\" />\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleForm } from 'kole-ui/vue2';\n\nexport default {\n  name: 'FormDemo',\n  components: { KoleForm },\n  data(): Record<string, unknown> { return { error: '' }; },\n  methods: {\n    onSubmit(e) {\n      const name = e.target.elements.name.value.trim();\n      this.error = name ? '' : '请输入名称';\n    },\n    resetError(): void { this.error = ''; },\n  },\n};\n</script>"
   },
   "notes": [
    "依据 frameworks/Form.html 首个 demo-block 的标记（label「名称」+ 必填 *、错误文案「请输入名称」）与脚本里 submit 校验（名称为空则显示错误）",
    "label / required / error 形参见 Form.jsx 与 Form.vue3.vue defineProps；提交与重置对应 emits submit/reset"
   ]
  },
  {
   "id": "form-ex-2",
   "title": "状态与使用场景",
   "titleSrc": "demo",
   "desc": "",
   "html": "<div class=\"demo-block\">\n  <div class=\"row kole-form\">\n    <div class=\"kole-form-surface\" style=\"padding:12px\">统一字段布局、必填标识、校验错误和提交/重置流程。</div>\n    <span class=\"kole-form-desc\">支持键盘焦点、状态反馈和令牌化样式。</span>\n  </div>\n  <p class=\"demo-note\">零运行时依赖；数据请求、权限和国际化由宿主接入方决定。</p>\n</div>",
   "preview": {
    "show": [
     [
      0,
      3
     ]
    ],
    "hide": [
     [
      1
     ],
     [
      0,
      0
     ],
     [
      0,
      1
     ],
     [
      0,
      2
     ],
     [
      0,
      3,
      0
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<div class=\"kole-form\">\n  <div class=\"kole-form-surface\" style=\"padding:12px\">统一字段布局、必填标识、校验错误和提交/重置流程。</div>\n  <span class=\"kole-form-desc\">支持键盘焦点、状态反馈和令牌化样式。</span>\n</div>\n<p>零运行时依赖；数据请求、权限和国际化由宿主接入方决定。</p>",
    "jsx": "import { KoleForm } from 'kole-ui/react';\n\n// 状态与使用场景（frameworks/Form.html 第二个 demo-block 文案）：统一字段布局 + 必填标识 + 校验错误 + 提交/重置流程\n// error 传入文案即渲染校验错误行；清空后回到默认态\n<KoleForm\n  label=\"名称\"\n  required\n  error=\"请输入名称\"\n  onSubmit={() => console.log('提交')}\n/>",
    "vue3": "<script setup>\nimport { KoleForm } from 'kole-ui/vue3';\n\nfunction onSubmit() { console.log('提交'); }\nfunction onReset() { console.log('重置'); }\n</script>\n\n<template>\n  <!-- 错误态：error 传入文案即显示校验提示；提交 / 重置沿用同一套字段布局 -->\n  <KoleForm label=\"名称\" required error=\"请输入名称\" @submit=\"onSubmit\" @reset=\"onReset\" />\n</template>",
    "vue2": "<template>\n  <KoleForm label=\"名称\" required error=\"请输入名称\" @submit=\"onSubmit\" @reset=\"onReset\" />\n</template>\n\n<script>\nimport { KoleForm } from 'kole-ui/vue2';\n\nexport default {\n  name: 'FormErrorDemo',\n  components: { KoleForm },\n  methods: {\n    onSubmit() { console.log('提交'); },\n    onReset() { console.log('重置'); },\n  },\n};\n</script>",
    "tsx": "import { KoleForm } from 'kole-ui/react';\n\nexport default function KoleFormDemo(): JSX.Element {\n  // 状态与使用场景（frameworks/Form.html 第二个 demo-block 文案）：统一字段布局 + 必填标识 + 校验错误 + 提交/重置流程\n  // error 传入文案即渲染校验错误行；清空后回到默认态\n  return (\n    <KoleForm\n      label=\"名称\"\n      required\n      error=\"请输入名称\"\n      onSubmit={() => console.log('提交')}\n    />\n  );\n}",
    "vue3ts": "<template>\n\n  <!-- 错误态：error 传入文案即显示校验提示；提交 / 重置沿用同一套字段布局 -->\n  <KoleForm label=\"名称\" required error=\"请输入名称\" @submit=\"onSubmit\" @reset=\"onReset\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleForm } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('状态与使用场景');\nfunction onSubmit() { console.log('提交'); }\nfunction onReset() { console.log('重置'); }\n</script>",
    "vue2ts": "<template>\n\n  <KoleForm label=\"名称\" required error=\"请输入名称\" @submit=\"onSubmit\" @reset=\"onReset\" />\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleForm } from 'kole-ui/vue2';\n\nexport default {\n  name: 'FormErrorDemo',\n  components: { KoleForm },\n  methods: {\n    onSubmit(): void { console.log('提交'); },\n    onReset(): void { console.log('重置'); },\n  },\n};\n</script>"
   },
   "notes": [
    "该示例块为场景说明块（frameworks/Form.html 第二个 demo-block 只有 kole-form-surface 文案「统一字段布局、必填标识、校验错误和提交/重置流程」），片段按该文案给出错误态调用",
    "error/label/required 见 Form.jsx 形参与 Form.vue3.vue defineProps；错误文案「请输入名称」取自同一页首个 demo-block 的 kole-form-error 元素"
   ]
  }
 ],
 "curated": true
}