Can you stop the label from outputting for a custom input with formkit?

Question

I am creating a custom input via the component method with formkit.

I have the computed which looks like this

<template>
<label
    class="InputCheckboxFeature"
    :for="props.context.id"
  >
    <input
      :id="props.context.id"
      type="checkbox"
      class="sr-only"
      :checked="checked"
      @input="handleInput"
      :value="props.context._value"
    />
    <span class="InputCheckboxFeature__indicator">
      <span class="space-x-4 inline-flex items-center">
        <span
          v-if="props.context.attrs.icon"
          class="InputCheckboxFeature__icon"
          v-html="props.context.attrs.icon"
        >
        </span>
        <span class="inline-block">
          {{ props.context.label }}
        </span>
      </span>
      <ButtonInfo
        v-if="props.context.tooltip"
        class="flex-shrink-0"
        :text="props.context.tooltip"
        aria-label="More Info"
      />
    </span>
  </label>
</template>

I then have a plugin that strips out all the HTML elements so the custom input will only output the component markup

export const createCleanInputPlugin = (): FormKitPlugin => {
  return (node: FormKitNode) => {
    node.on('created', () => {
      const { props } = node;

      if (
        !(
          props.type === InputType.FEATURED_CHECKBOX &&
          props.definition &&
          typeof props.definition.schema === 'function'
        )
      ) {
        return;
      }

      const definition = { ...props.definition };
      const schema = definition.schema as FormKitExtendableSchemaRoot;

      // We replace the schema function with our own higher-order-function
      definition.schema = function (extensions = {}) {
        const ext = {
          ...extensions,
          ...{
            inner: { $el: null },
            outer: { $el: null },
            label: { $el: null },
            wrapper: { $el: null },
          },
        };

        // Finally we call the original schema, with our extensions applied
        return schema(ext);
      };

      // Now we replace the input definition
      props.definition = definition as FormKitTypeDefinition;
    });
  };
};

The problem I am facing is that when the element is rendered it is outputting the label twice.

Is it possible to hide the label, and only have it render in the component?

Answer 1

Looks like to me that you're using createInput correct? that one does add a lot of dom elements and props for easy of use, if you want to fully create a custom input without those, you can simply supply instead of createInput a Input Definition.

That way you're in full control over your input, nothing will be added but the context.