daniellehuisman/formkit-primevue

PrimeVue support for the FormKit validation Framwork

Formkit - Primevue

Helper classes for using Formkit with the PrimeVue UI Framework

Docs

Docs

Demo/Playground

Usage

import { defaultConfig, plugin } from '@formkit/vue'
import { primeInputs } from '@sfxcode/formkit-primevue'


  app.use(plugin, defaultConfig({
    locales: { de, en },
    // Define the active locale
    locale: 'en',
    inputs: primeInputs,
  }))

Basic Styling

Basic styling is provided with the formkit-primevue.scss file.

Features:

• Width of all text and dropdown elements is set to 100%
• Error Color by variable (--formkit-error-color)
• Some margins, font sizes ...

You can use it or take it as base for your own styling.

Extended Styling

• All inputs are wrapped in a div with a p-formkit class
• Most Prime Components have access to class / styles attributes
• PT and PTOptions are available (https://primevue.org/passthrough/)
• Styling, Grid and PT demo available

Showcases

Demo Application

Nuxt 3 PrimeVue Starter and Vite PrimeVue Starter with Formkit support available.

Supported Inputs

• Calendar
• Checkbox
• Dropdown
• Editor (HTML Editor)
• InputMask
• InputNumber
• InputSwitch
• InputText
• InputTextarea
• MultiSelect
• Password
• Ranking
• Chips
• Knob
• ColorPicker
• Listbox
• ToggleButton
• SelectButton
• TriStateCheckbox
• RadioButton