FormKit Quasar

A simple input wrapper of Quasar for FormKit.

Most components are based on Quasar; non-FormKit-specific attributes are passed directly through to the underlying Quasar component.

Documentation

See the docs/ folder for a per-component usage guide covering every supported input type with live examples.

Live docs: https://formkit-quasar.netlify.app/

Run the docs site locally:

npm run docs:dev

Build a static copy of the docs:

npm run docs:build

The output is written to docs-dist/. The docs site is automatically deployed to Netlify on every push to main via .github/workflows/deploy-docs.yml.

Installation

npm install formkit-quasar

Setup

import{createApp}from'vue'importAppfrom'./App.vue'import{Quasar}from'quasar'import'quasar/dist/quasar.prod.css'import{createQuasarPlugin}from"formkit-quasar"import{plugin,defaultConfig}from'@formkit/vue'constapp=createApp(App)app.use(Quasar,{plugins: {}})app.use(plugin,defaultConfig({plugins: [createQuasarPlugin()]}))app.mount('#app')

Usage

Use the FormKit type attribute to select the Quasar input you want. Attributes that aren't FormKit-specific are forwarded to the Quasar component.

<FormKittype="q-input" label="Input" name="input" validation="required"><templatev-slot:prepend><q-iconname="event" /></template></FormKit><FormKittype="q-input" label="Password" name="password1" input-type="password" /><FormKittype="q-select" label="Select" name="select1" validation="required" :options="[ 'Monaco', 'Vatican City', 'Maldives', 'Tuvalu',]" /><FormKittype="q-checkbox" label="Checkbox" name="checkbox1" /><FormKittype="q-radio" name="radio1" :options="[ { label: 'Line', value: 'line' }, { label: 'Rectangle', value: 'rectangle' }, { label: 'Ellipse', value: 'ellipse' }]" /><FormKittype="q-option-group" name="group" :options="[ { label: 'Battery too low', value: 'bat' }, { label: 'Friend request', value: 'friend', color: 'green' }, { label: 'Picture uploaded', value: 'upload', color: 'red' }]" /><FormKittype="q-option-group" option-type="checkbox" name="group2" :options="[ { label: 'Battery too low', value: 'bat' }, { label: 'Friend request', value: 'friend', color: 'green' }, { label: 'Picture uploaded', value: 'upload', color: 'red' }]" /><FormKittype="q-toggle" name="toggle1" /><FormKittype="q-rating" name="rating1" /><FormKittype="q-btn-toggle" name="btn_toggle" :options="[ { label: 'One', value: 'one' }, { label: 'Two', value: 'two' }, { label: 'Three', value: 'three' }]" /><FormKittype="q-date" name="date1" /><FormKittype="q-time" name="time1" /><FormKittype="q-file" label="File" name="file1" /><FormKittype="q-range" label="Range" name="range1" /><FormKittype="q-color" label="Color" name="color1" /><FormKittype="q-editor" name="editor1" /><FormKittype="q-slider" name="slider1" /><FormKittype="q-textarea" label="Textarea" name="textarea1" validation="required" />

Supported Inputs

FormKit type	Quasar component	Notes
q-input	QInput	Use input-type for native HTML types.
q-textarea	QInput (type="textarea")	Pass rows to control height.
q-select	QSelect	String array or [{ label, value, disable? }].
q-checkbox	QCheckbox	Boolean; use validation="accepted".
q-radio	QOptionGroup (auto) / QRadio	Pass :options for a mutually exclusive group.
q-option-group	QOptionGroup	Set `option-type="radio"
q-toggle	QToggle
q-btn-toggle	QBtnToggle	Deprecated by Quasar; kept for completeness.
q-date	QDate	Bound to a string.
q-time	QTime	Bound to a string.
q-file	QFile	Bound to `File
q-color	QColor	Bound to a hex string.
q-range	QRange	Bound to { min, max }.
q-slider	QSlider	Bound to a number.
q-rating	QRating	Bound to a number.
q-editor	QEditor	Bound to an HTML string.

Validation errors are rendered under each field. Inputs that do not expose Quasar's native error / error-message props (e.g. q-color, q-date, q-time, q-slider, q-range, q-rating, q-btn-toggle) display the error as a red caption below the field.

Project Structure

src/
components/ # Vue wrappers for each Quasar input (library code)
utils/ # FormKit error-message helpers
vite-env.d.ts # FormKit type augmentation for library users
docs/ # Docs & live examples site (Vue Router)
pages/ # One page per input type
App.vue, main.ts, router.ts, index.html
vite.config.ts # Library build (npm publish target)
vite.docs.config.ts # Docs site build

Scripts

Command	Description
npm run dev	Start the docs site (Vite dev server).
npm run docs:dev	Same as npm run dev.
npm run build	Type-check and build the library to dist/.
npm run docs:build	Build a static copy of the docs to docs-dist/.
npm run release	Bump patch version, build the library, publish.

Peer Dependencies

These are required at runtime and installed transitively via @formkit/vue. Declare them in your own peerDependencies if you want to pin the version:

• @formkit/core^2.1.0
• @formkit/validation^2.1.0

License

MIT