Plugin de Etiquetas Flutuantes

• Instalação
• Uso

Usando a função createFloatingLabelsPlugin de @formkit/addons, você pode facilmente adicionar um tratamento de etiqueta flutuante a qualquer entrada da família text (text, email, url, date, etc) ou textarea do FormKit.

Instalação

Para usar este plugin com o FormKit, instale @formkit/addons:

yarn add @formkit/addons

Depois de instalar o pacote de addons, você precisará registrar o plugin com o FormKit e incluir os estilos CSS de suporte. O createFloatingLabelsPlugin tem uma opção que você pode configurar que controla se o tratamento de etiqueta flutuante é o tratamento padrão em entradas aplicáveis:

// formkit.config.js
import { defaultConfig } from '@formkit/vue'
import { createFloatingLabelsPlugin } from '@formkit/addons'
import '@formkit/addons/css/floatingLabels'

const config = defaultConfig({
  plugins: [
    createFloatingLabelsPlugin({
      useAsDefault: true, // padrão é false
    }),
  ],
})

export default config

Uso

Por padrão, o plugin de etiqueta flutuante só tem efeito em uma entrada do FormKit se você definir a nova propriedade floating-label como true.

Se você quiser usar etiquetas flutuantes por padrão, passe a opção useAsDefault para o plugin quando você o instalar.

// formkit.config.js
...
plugins: [
  createFloatingLabelsPlugin({
    useAsDefault: true
  }),
],
...

Quando as etiquetas flutuantes estão definidas como padrão, você ainda pode desativá-las em uma entrada do FormKit definindo a propriedade floating-label como false.

É isso! Etiquetas flutuantes nas suas entradas do FormKit em apenas 3 linhas adicionais de código.