{
 "slug": "input",
 "curated": true,
 "mode": "scenarios",
 "examples": [
  {
   "id": "input-ex-1",
   "title": "默认输入框",
   "titleSrc": "demo",
   "desc": "",
   "html": "<div class=\"group\">\n  <div class=\"row\">\n    <div class=\"field kole-field\">\n      <div class=\"kole-input\">\n        <input placeholder=\"请输入客户名称\" />\n      </div>\n    </div>\n  </div>\n</div>",
   "preview": {
    "show": [
     [
      2
     ]
    ],
    "hide": [
     [
      0
     ],
     [
      1
     ],
     [
      3
     ],
     [
      4
     ],
     [
      5
     ],
     [
      6
     ],
     [
      7
     ],
     [
      8
     ],
     [
      9
     ],
     [
      2,
      0
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<div class=\"kole-field\">\n  <div class=\"kole-input\">\n    <input placeholder=\"请输入客户名称\" />\n  </div>\n</div>",
    "jsx": "import { KoleInput } from 'kole-ui/react';\n\n<KoleInput placeholder=\"请输入客户名称\" />",
    "vue3": "<template>\n  <KoleInput placeholder=\"请输入客户名称\" />\n</template>\n\n<script setup>\nimport { KoleInput } from 'kole-ui/vue3';\n</script>",
    "vue2": "<template>\n  <div>\n    <KoleInput placeholder=\"请输入客户名称\" />\n  </div>\n</template>\n\n<script>\nimport { KoleInput } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleInput }\n};\n</script>",
    "tsx": "import { KoleInput } from 'kole-ui/react';\n\nexport default function KoleInputDemo(): JSX.Element {\n  return (\n    <KoleInput placeholder=\"请输入客户名称\" />\n  );\n}",
    "vue3ts": "<template>\n\n  <KoleInput placeholder=\"请输入客户名称\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleInput } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('默认输入框');\n\n</script>",
    "vue2ts": "<template>\n\n  <div>\n    <KoleInput placeholder=\"请输入客户名称\" />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleInput } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleInput },\n  data(): Record<string, never> {\n    return {};\n  }\n};\n</script>"
   },
   "notes": [
    "依据 frameworks/Input.html 默认示例标记中的 placeholder=\"请输入客户名称\""
   ]
  },
  {
   "id": "input-ex-2",
   "title": "三种尺寸",
   "titleSrc": "demo",
   "desc": "",
   "html": "<div class=\"group\">\n  <div class=\"row\">\n    <div class=\"field kole-field\">\n      <div class=\"kole-input kole-input-lg\">\n        <input placeholder=\"大尺寸\" />\n      </div>\n    </div>\n    <div class=\"field kole-field\">\n      <div class=\"kole-input kole-input-md\">\n        <input placeholder=\"默认尺寸\" />\n      </div>\n    </div>\n    <div class=\"field kole-field\">\n      <div class=\"kole-input kole-input-sm\">\n        <input placeholder=\"小尺寸\" />\n      </div>\n    </div>\n  </div>\n</div>",
   "preview": {
    "show": [
     [
      3
     ]
    ],
    "hide": [
     [
      0
     ],
     [
      1
     ],
     [
      2
     ],
     [
      4
     ],
     [
      5
     ],
     [
      6
     ],
     [
      7
     ],
     [
      8
     ],
     [
      9
     ],
     [
      3,
      0
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<div class=\"kole-field\">\n  <div class=\"kole-input kole-input-lg\">\n    <input placeholder=\"大尺寸\" />\n  </div>\n</div>\n<div class=\"kole-field\">\n  <div class=\"kole-input\">\n    <input placeholder=\"默认尺寸\" />\n  </div>\n</div>\n<div class=\"kole-field\">\n  <div class=\"kole-input kole-input-sm\">\n    <input placeholder=\"小尺寸\" />\n  </div>\n</div>",
    "jsx": "import { KoleInput } from 'kole-ui/react';\n\n<>\n  <KoleInput size=\"large\" placeholder=\"大尺寸\" />\n  <KoleInput size=\"default\" placeholder=\"默认尺寸\" />\n  <KoleInput size=\"small\" placeholder=\"小尺寸\" />\n</>",
    "vue3": "<template>\n  <KoleInput size=\"large\" placeholder=\"大尺寸\" />\n  <KoleInput size=\"default\" placeholder=\"默认尺寸\" />\n  <KoleInput size=\"small\" placeholder=\"小尺寸\" />\n</template>\n\n<script setup>\nimport { KoleInput } from 'kole-ui/vue3';\n</script>",
    "vue2": "<template>\n  <div>\n    <KoleInput size=\"large\" placeholder=\"大尺寸\" />\n    <KoleInput size=\"default\" placeholder=\"默认尺寸\" />\n    <KoleInput size=\"small\" placeholder=\"小尺寸\" />\n  </div>\n</template>\n\n<script>\nimport { KoleInput } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleInput }\n};\n</script>",
    "tsx": "import { KoleInput } from 'kole-ui/react';\n\nexport default function KoleInputDemo(): JSX.Element {\n  return (\n    <>\n      <KoleInput size=\"large\" placeholder=\"大尺寸\" />\n      <KoleInput size=\"default\" placeholder=\"默认尺寸\" />\n      <KoleInput size=\"small\" placeholder=\"小尺寸\" />\n    </>\n  );\n}",
    "vue3ts": "<template>\n\n  <KoleInput size=\"large\" placeholder=\"大尺寸\" />\n  <KoleInput size=\"default\" placeholder=\"默认尺寸\" />\n  <KoleInput size=\"small\" placeholder=\"小尺寸\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleInput } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('三种尺寸');\n\n</script>",
    "vue2ts": "<template>\n\n  <div>\n    <KoleInput size=\"large\" placeholder=\"大尺寸\" />\n    <KoleInput size=\"default\" placeholder=\"默认尺寸\" />\n    <KoleInput size=\"small\" placeholder=\"小尺寸\" />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleInput } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleInput },\n  data(): Record<string, never> {\n    return {};\n  }\n};\n</script>"
   },
   "notes": [
    "依据 frameworks/Input.html 三种尺寸示例的 kole-input-lg / kole-input-md / kole-input-sm 三档与各自 placeholder；size 取值见 data.json contract dims size:[default,large,small]"
   ]
  },
  {
   "id": "input-ex-3",
   "title": "错误态（含错误提示）",
   "titleSrc": "demo",
   "desc": "",
   "html": "<div class=\"group\">\n  <div class=\"row\">\n    <div class=\"field kole-field has-error\">\n      <div class=\"kole-input is-error\">\n        <input value=\"abc\" />\n      </div>\n      <span class=\"error-text\">联系电话格式不正确，请检查后重试</span>\n    </div>\n  </div>\n</div>",
   "preview": {
    "show": [
     [
      4
     ]
    ],
    "hide": [
     [
      0
     ],
     [
      1
     ],
     [
      2
     ],
     [
      3
     ],
     [
      5
     ],
     [
      6
     ],
     [
      7
     ],
     [
      8
     ],
     [
      9
     ],
     [
      4,
      0
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<div class=\"kole-field\">\n  <div class=\"kole-input is-error\">\n    <input value=\"abc\" />\n  </div>\n  <span class=\"error-text\">联系电话格式不正确，请检查后重试</span>\n</div>",
    "jsx": "import { KoleInput } from 'kole-ui/react';\n\n<KoleInput\n  defaultValue=\"abc\"\n  error\n  errorText=\"联系电话格式不正确，请检查后重试\"\n/>",
    "vue3": "<template>\n  <KoleInput\n    v-model=\"phone\"\n    error\n    error-text=\"联系电话格式不正确，请检查后重试\"\n  />\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KoleInput } from 'kole-ui/vue3';\n\nconst phone = ref('abc');\n</script>",
    "vue2": "<template>\n  <div>\n    <KoleInput\n      v-model=\"phone\"\n      error\n      error-text=\"联系电话格式不正确，请检查后重试\"\n    />\n  </div>\n</template>\n\n<script>\nimport { KoleInput } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleInput },\n  data() {\n    return { phone: 'abc' };\n  }\n};\n</script>",
    "tsx": "import { KoleInput } from 'kole-ui/react';\n\nexport default function KoleInputDemo(): JSX.Element {\n  return (\n    <KoleInput\n      defaultValue=\"abc\"\n      error\n      errorText=\"联系电话格式不正确，请检查后重试\"\n    />\n  );\n}",
    "vue3ts": "<template>\n\n  <KoleInput\n    v-model=\"phone\"\n    error\n    error-text=\"联系电话格式不正确，请检查后重试\"\n  />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleInput } from 'kole-ui/vue3';\n\nconst phone = ref<string>('abc');\n</script>",
    "vue2ts": "<template>\n\n  <div>\n    <KoleInput\n      v-model=\"phone\"\n      error\n      error-text=\"联系电话格式不正确，请检查后重试\"\n    />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleInput } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleInput },\n  data(): Record<string, unknown> {\n    return { phone: 'abc' };\n  }\n};\n</script>"
   },
   "notes": [
    "依据 frameworks/Input.html 错误态示例的 value=\"abc\" 与 .error-text 文案「联系电话格式不正确，请检查后重试」；对应 props error / errorText"
   ]
  },
  {
   "id": "input-ex-4",
   "title": "前后缀",
   "titleSrc": "demo",
   "desc": "",
   "html": "<div class=\"group\">\n  <div class=\"row\">\n    <div class=\"field kole-field\">\n      <div class=\"kole-input\">\n        <span class=\"affix prefix\">\n          <svg width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n            <circle cx=\"11\" cy=\"11\" r=\"7\"></circle>\n            <path d=\"M21 21l-4-4\"></path>\n          </svg>\n        </span>\n        <input placeholder=\"搜索订单编号 / 客户名称\" />\n      </div>\n    </div>\n    <div class=\"field kole-field\">\n      <div class=\"kole-input\">\n        <input value=\"kole\" />\n        <span class=\"affix suffix\">.com</span>\n      </div>\n    </div>\n  </div>\n</div>",
   "preview": {
    "show": [
     [
      5
     ]
    ],
    "hide": [
     [
      0
     ],
     [
      1
     ],
     [
      2
     ],
     [
      3
     ],
     [
      4
     ],
     [
      6
     ],
     [
      7
     ],
     [
      8
     ],
     [
      9
     ],
     [
      5,
      0
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<div class=\"kole-field\">\n  <div class=\"kole-input\">\n    <span class=\"affix\">\n      <svg width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\"></circle>\n        <path d=\"M21 21l-4-4\"></path>\n      </svg>\n    </span>\n    <input placeholder=\"搜索订单编号 / 客户名称\" />\n  </div>\n</div>\n<div class=\"kole-field\">\n  <div class=\"kole-input\">\n    <input value=\"kole\" />\n    <span class=\"affix\">.com</span>\n  </div>\n</div>",
    "jsx": "import { KoleInput } from 'kole-ui/react';\n\nconst SearchIcon = () => (\n  <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\">\n    <circle cx=\"11\" cy=\"11\" r=\"7\" />\n    <path d=\"M21 21l-4-4\" />\n  </svg>\n);\n\n<>\n  <KoleInput prefix={<SearchIcon />} placeholder=\"搜索订单编号 / 客户名称\" />\n  <KoleInput defaultValue=\"kole\" suffix=\".com\" />\n</>",
    "vue3": "<template>\n  <KoleInput placeholder=\"搜索订单编号 / 客户名称\">\n    <template #prefix>\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" />\n        <path d=\"M21 21l-4-4\" />\n      </svg>\n    </template>\n  </KoleInput>\n  <KoleInput model-value=\"kole\">\n    <template #suffix>.com</template>\n  </KoleInput>\n</template>\n\n<script setup>\nimport { KoleInput } from 'kole-ui/vue3';\n</script>",
    "vue2": "<template>\n  <div>\n    <KoleInput placeholder=\"搜索订单编号 / 客户名称\">\n      <svg slot=\"prefix\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\"></circle>\n        <path d=\"M21 21l-4-4\"></path>\n      </svg>\n    </KoleInput>\n    <KoleInput value=\"kole\">\n      <span slot=\"suffix\">.com</span>\n    </KoleInput>\n  </div>\n</template>\n\n<script>\nimport { KoleInput } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleInput }\n};\n</script>",
    "tsx": "import { KoleInput } from 'kole-ui/react';\n\nexport default function KoleInputDemo(): JSX.Element {\n  const SearchIcon = () => (\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\">\n      <circle cx=\"11\" cy=\"11\" r=\"7\" />\n      <path d=\"M21 21l-4-4\" />\n    </svg>\n  );\n  return (\n    <>\n      <KoleInput prefix={<SearchIcon />} placeholder=\"搜索订单编号 / 客户名称\" />\n      <KoleInput defaultValue=\"kole\" suffix=\".com\" />\n    </>\n  );\n}",
    "vue3ts": "<template>\n\n  <KoleInput placeholder=\"搜索订单编号 / 客户名称\">\n    <template #prefix>\n      <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\" />\n        <path d=\"M21 21l-4-4\" />\n      </svg>\n    </template>\n  </KoleInput>\n  <KoleInput model-value=\"kole\">\n    <template #suffix>.com</template>\n  </KoleInput>\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleInput } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('前后缀');\n\n</script>",
    "vue2ts": "<template>\n\n  <div>\n    <KoleInput placeholder=\"搜索订单编号 / 客户名称\">\n      <svg slot=\"prefix\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n        <circle cx=\"11\" cy=\"11\" r=\"7\"></circle>\n        <path d=\"M21 21l-4-4\"></path>\n      </svg>\n    </KoleInput>\n    <KoleInput value=\"kole\">\n      <span slot=\"suffix\">.com</span>\n    </KoleInput>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleInput } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleInput },\n  data(): Record<string, never> {\n    return {};\n  }\n};\n</script>"
   },
   "notes": [
    "依据 frameworks/Input.html 前后缀示例：第一个是 amp/affix prefix 内的放大镜 SVG（circle cx=11 cy=11 r=7 + path M21 21l-4-4）配 placeholder=\"搜索订单编号 / 客户名称\"；第二个是 value=\"kole\" 配 affix suffix \".com\"。React 用 prefix/suffix prop，Vue 用 prefix/suffix 具名插槽"
   ]
  },
  {
   "id": "input-ex-5",
   "title": "清除按钮（clearable）",
   "titleSrc": "demo",
   "desc": "",
   "html": "<div class=\"group\">\n  <div class=\"row\">\n    <div class=\"field kole-field\">\n      <div class=\"kole-input\" data-clearable>\n        <input value=\"可清除文本\" />\n        <button class=\"action clear\" aria-label=\"清除\" data-act=\"clear\">\n          <svg width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n            <path d=\"M18 6L6 18M6 6l12 12\"></path>\n          </svg>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>",
   "preview": {
    "show": [
     [
      6
     ]
    ],
    "hide": [
     [
      0
     ],
     [
      1
     ],
     [
      2
     ],
     [
      3
     ],
     [
      4
     ],
     [
      5
     ],
     [
      7
     ],
     [
      8
     ],
     [
      9
     ],
     [
      6,
      0
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<div class=\"kole-field\">\n  <div class=\"kole-input\" data-clearable>\n    <input value=\"可清除文本\" />\n    <button class=\"action\" aria-label=\"清除\">\n      <svg width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n        <path d=\"M18 6L6 18M6 6l12 12\"></path>\n      </svg>\n    </button>\n  </div>\n</div>",
    "jsx": "import { useState } from 'react';\nimport { KoleInput } from 'kole-ui/react';\n\nfunction Demo() {\n  const [text, setText] = useState('可清除文本');\n  return <KoleInput value={text} onChange={setText} clearable placeholder=\"请输入\" />;\n}",
    "vue3": "<template>\n  <KoleInput v-model=\"text\" clearable placeholder=\"请输入\" />\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KoleInput } from 'kole-ui/vue3';\n\nconst text = ref('可清除文本');\n</script>",
    "vue2": "<template>\n  <div>\n    <KoleInput v-model=\"text\" clearable placeholder=\"请输入\" />\n  </div>\n</template>\n\n<script>\nimport { KoleInput } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleInput },\n  data() {\n    return { text: '可清除文本' };\n  }\n};\n</script>",
    "tsx": "import { useState } from 'react';\nimport { KoleInput } from 'kole-ui/react';\n\nfunction Demo(): JSX.Element {\n  const [text, setText] = useState<string>('可清除文本');\n  return <KoleInput value={text} onChange={setText} clearable placeholder=\"请输入\" />;\n}\n\nexport default Demo;",
    "vue3ts": "<template>\n\n  <KoleInput v-model=\"text\" clearable placeholder=\"请输入\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleInput } from 'kole-ui/vue3';\n\nconst text = ref<string>('可清除文本');\n</script>",
    "vue2ts": "<template>\n\n  <div>\n    <KoleInput v-model=\"text\" clearable placeholder=\"请输入\" />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleInput } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleInput },\n  data(): Record<string, unknown> {\n    return { text: '可清除文本' };\n  }\n};\n</script>"
   },
   "notes": [
    "依据 frameworks/Input.html 清除按钮示例的 value=\"可清除文本\" 与 button.action.clear[aria-label=清除]；有值且未禁用时 clearable 才渲染清除按钮（见 frameworks/Input.jsx 的 clearable && current && !disabled）"
   ]
  },
  {
   "id": "input-ex-6",
   "title": "密码切换",
   "titleSrc": "demo",
   "desc": "",
   "html": "<div class=\"group\">\n  <div class=\"row\">\n    <div class=\"field kole-field\">\n      <div class=\"kole-input\" data-password>\n        <input type=\"password\" data-pw value=\"secret123\" />\n        <button class=\"action toggle\" aria-label=\"显示密码\" data-act=\"toggle-pw\">\n          <svg width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n            <path d=\"M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z\"></path>\n            <circle cx=\"12\" cy=\"12\" r=\"3\"></circle>\n          </svg>\n        </button>\n      </div>\n    </div>\n  </div>\n</div>",
   "preview": {
    "show": [
     [
      7
     ]
    ],
    "hide": [
     [
      0
     ],
     [
      1
     ],
     [
      2
     ],
     [
      3
     ],
     [
      4
     ],
     [
      5
     ],
     [
      6
     ],
     [
      8
     ],
     [
      9
     ],
     [
      7,
      0
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<div class=\"kole-field\">\n  <div class=\"kole-input\">\n    <input type=\"password\" value=\"secret123\" />\n    <button class=\"action\" aria-label=\"显示密码\">\n      <svg width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\">\n        <path d=\"M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z\"></path>\n        <circle cx=\"12\" cy=\"12\" r=\"3\"></circle>\n      </svg>\n    </button>\n  </div>\n</div>",
    "jsx": "import { useState } from 'react';\nimport { KoleInput } from 'kole-ui/react';\n\nfunction Demo() {\n  const [pwd, setPwd] = useState('secret123');\n  return <KoleInput type=\"password\" value={pwd} onChange={setPwd} placeholder=\"请输入密码\" />;\n}",
    "vue3": "<template>\n  <KoleInput v-model=\"pwd\" type=\"password\" placeholder=\"请输入密码\" />\n</template>\n\n<script setup>\nimport { ref } from 'vue';\nimport { KoleInput } from 'kole-ui/vue3';\n\nconst pwd = ref('secret123');\n</script>",
    "vue2": "<template>\n  <div>\n    <KoleInput v-model=\"pwd\" type=\"password\" placeholder=\"请输入密码\" />\n  </div>\n</template>\n\n<script>\nimport { KoleInput } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleInput },\n  data() {\n    return { pwd: 'secret123' };\n  }\n};\n</script>",
    "tsx": "import { useState } from 'react';\nimport { KoleInput } from 'kole-ui/react';\n\nfunction Demo(): JSX.Element {\n  const [pwd, setPwd] = useState<string>('secret123');\n  return <KoleInput type=\"password\" value={pwd} onChange={setPwd} placeholder=\"请输入密码\" />;\n}\n\nexport default Demo;",
    "vue3ts": "<template>\n\n  <KoleInput v-model=\"pwd\" type=\"password\" placeholder=\"请输入密码\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleInput } from 'kole-ui/vue3';\n\nconst pwd = ref<string>('secret123');\n</script>",
    "vue2ts": "<template>\n\n  <div>\n    <KoleInput v-model=\"pwd\" type=\"password\" placeholder=\"请输入密码\" />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleInput } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleInput },\n  data(): Record<string, unknown> {\n    return { pwd: 'secret123' };\n  }\n};\n</script>"
   },
   "notes": [
    "依据 frameworks/Input.html 密码切换示例的 input[type=password][data-pw][value=\"secret123\"] 与 button.action.toggle[aria-label=显示密码]；type=\"password\" 时组件内建显隐切换"
   ]
  },
  {
   "id": "input-ex-7",
   "title": "禁用态",
   "titleSrc": "demo",
   "desc": "",
   "html": "<div class=\"group\">\n  <div class=\"row\">\n    <div class=\"field kole-field\">\n      <div class=\"kole-input is-disabled\">\n        <input disabled value=\"不可编辑\" />\n      </div>\n    </div>\n  </div>\n</div>",
   "preview": {
    "show": [
     [
      8
     ]
    ],
    "hide": [
     [
      0
     ],
     [
      1
     ],
     [
      2
     ],
     [
      3
     ],
     [
      4
     ],
     [
      5
     ],
     [
      6
     ],
     [
      7
     ],
     [
      9
     ],
     [
      8,
      0
     ]
    ],
    "mode": "scenarios"
   },
   "previewSafe": true,
   "previewUnsafeReasons": [],
   "source": "curated",
   "code": {
    "html": "<div class=\"kole-field\">\n  <div class=\"kole-input is-disabled\">\n    <input disabled value=\"不可编辑\" />\n  </div>\n</div>",
    "jsx": "import { KoleInput } from 'kole-ui/react';\n\n<KoleInput disabled defaultValue=\"不可编辑\" placeholder=\"请输入\" />",
    "vue3": "<template>\n  <KoleInput disabled model-value=\"不可编辑\" placeholder=\"请输入\" />\n</template>\n\n<script setup>\nimport { KoleInput } from 'kole-ui/vue3';\n</script>",
    "vue2": "<template>\n  <div>\n    <KoleInput disabled value=\"不可编辑\" placeholder=\"请输入\" />\n  </div>\n</template>\n\n<script>\nimport { KoleInput } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleInput }\n};\n</script>",
    "tsx": "import { KoleInput } from 'kole-ui/react';\n\nexport default function KoleInputDemo(): JSX.Element {\n  return (\n    <KoleInput disabled defaultValue=\"不可编辑\" placeholder=\"请输入\" />\n  );\n}",
    "vue3ts": "<template>\n\n  <KoleInput disabled model-value=\"不可编辑\" placeholder=\"请输入\" />\n</template>\n\n<script setup lang=\"ts\">\nimport { KoleInput } from 'kole-ui/vue3';\n\nconst demoTitle = ref<string>('禁用态');\n\n</script>",
    "vue2ts": "<template>\n\n  <div>\n    <KoleInput disabled value=\"不可编辑\" placeholder=\"请输入\" />\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport Vue from 'vue';\nimport { KoleInput } from 'kole-ui/vue2';\n\nexport default {\n  components: { KoleInput },\n  data(): Record<string, never> {\n    return {};\n  }\n};\n</script>"
   },
   "notes": [
    "依据 frameworks/Input.html 禁用态示例的 .kole-input.is-disabled 与 input[disabled][value=\"不可编辑\"]"
   ]
  }
 ]
}