FormKit自定义输入组件标签重复：如何隐藏默认标签？

要隐藏FormKit自动生成的默认标签，仅保留自定义组件内的标签，有以下几种可行方案：

方案1：组件定义时禁用默认标签渲染 #

在通过defineFormKitInput创建自定义复选框组件时，直接配置label: false，告诉FormKit不要自动渲染默认标签，只使用你组件内的label元素：

import { defineFormKitInput } from '@formkit/vue'

export default defineFormKitInput({
  // 禁用FormKit默认label渲染
  label: false,
  component: {
    template: `
      <div class="custom-checkbox-wrapper">
        <label>
          <input 
            type="checkbox" 
            :checked="context.state.value" 
            @input="handleInputChange"
          />
          <span>{{ context.props.label }}</span>
        </label>
      </div>
    `,
    methods: {
      handleInputChange(e) {
        this.context.commit('input', e.target.checked)
      }
    }
  }
})

方案2：使用props强制隐藏默认标签 #

如果不想修改组件定义，可在使用自定义组件时，通过label-position="hidden"属性隐藏FormKit生成的默认标签：

<FormKit 
  type="custom-checkbox" 
  label="同意服务条款" 
  label-position="hidden"
/>

方案3：扩展cleanInput插件移除默认标签 #

如果你已经在使用createCleanInputPlugin，可以扩展插件的清理逻辑，主动移除FormKit生成的默认label元素：

import { createCleanInputPlugin } from '@formkit/plugins'

const customCleanPlugin = createCleanInputPlugin({
  clean(node) {
    // 定位并移除FormKit默认生成的label
    const formKitDefaultLabel = node.querySelector('[data-formkit-label]')
    if (formKitDefaultLabel) {
      formKitDefaultLabel.remove()
    }
    return node
  }
})

// 在FormKit配置中注册该插件
app.use(FormKit, {
  plugins: [customCleanPlugin]
})

方案4：通过Schema完全自定义组件结构 #

使用FormKit的Schema语法完全控制组件渲染结构，避免默认label的生成：

<FormKit
  type="checkbox"
  label="自定义标签文本"
  :schema="[
    {
      $cmp: 'div',
      class: 'custom-checkbox',
      children: [
        {
          $cmp: 'label',
          children: [
            { 
              $cmp: 'input', 
              type: 'checkbox', 
              bind: { checked: '$value' },
              on: { input: '$node.input' }
            },
            { $text: '$label' }
          ]
        }
      ]
    }
  ]"
/>

推荐方案1，从组件定义层面彻底禁用默认label渲染，是最简洁且不易出问题的解决方式。

内容的提问来源于stack exchange，提问作者nzmattman