How can i apply this type of floating label on textbox and textarea https://flowbite.com/docs/forms/floating-label/

[ajitkaur8b]

As currently label floats when we start typing but i want that effect when i click in the textbox not when start typing.

[adamberecz]

This isn't something you can do out of the box, but you can write a plugin for it.

Here's one way to achieve it:

// vueform.config.js

import { ref, toRefs } from 'vue';

import { defineConfig } from '@vueform/vueform'
import en from '@vueform/vueform/locales/en';
import tailwind from '@vueform/vueform/dist/tailwind';

export default defineConfig({
  theme: tailwind,
  locales: { en },
  locale: 'en',
  replaceClasses: {
    ElementLabelFloating: {
      label: {
        'transition-input': 'transition-all',
      },
    },
  },
  overrideClasses: {
    ElementLabelFloating: {
      label_as_placeholder: 'form-text form-pt-input !bg-transparent',
      $label: (classes, comp$) => [
        ...tailwind.classes.ElementLabelFloating.$label(classes, comp$),
        !comp$.el$.focused && !comp$.el$.value && comp$.el$.animateFloating
          ? classes.label_as_placeholder
          : null,
      ],
    },
  },
  plugins: [
    {
      apply: 'TextElement',
      props: {
        animateFloating: {
          required: false,
          type: Boolean,
          default: false,
        },
      },
      setup(props, context, component) {
        const { animateFloating } = toRefs(props);

        if (!animateFloating.value) {
          return component;
        }

        const empty = ref(false);
        const Placeholder = ref(null);

        return {
          ...component,
          empty,
          Placeholder,
        };
      },
    },
  ],
});

Then you can use animate-floating prop:

<template>
  <Vueform>
    <TextElement
      name="hello_world"
      label="Hello"
      floating="World"
      animate-floating
    />
  </Vueform>
</template>

Demo: https://stackblitz.com/edit/github-dhjmbmah?file=src%2FApp.vue,vueform.config.js