CODEWITHSUNDEEP
vuejs3formkit
nzmattman
nzmattman

Reputation: 619

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

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.

enter image description here

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

Upvotes: 1

Views: 661

Answers (1)

Gustavo Fenilli
Gustavo Fenilli

Reputation: 145

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.

Upvotes: 0

Related Questions