Integrations with third-party Libaries

Autosize

Add the autosize attribute to the Textarea component:

<Textarea name="biography" autosize />

Flatpickr

Flatpickr uses a Stylus stylesheet to style the library. Our stylesheet extends the vendor stylesheet (of Flatpickr) and adds some Tailwind-specific tweaks. Make sure your bundler handles Stylus stylesheets correctly, for example, by installing stylus and stylus-loader.

You can import the stylesheet in your Vue component:

import "@protonemedia/form-components-pro-vue2-tailwind2-unstyled/src/flatpickr.styl"

Add the date attribute to the Input component:

<Input name="published_at" date />

You can instantiate Flatpickr with a custom set of options (opens new window) by passing an object to the date attribute:

<Input name="published_at" :date="{ dateFormat: 'm-d-Y' }" />

Add the date and time attribute to the Input component to get a timepicker as well:

<Input name="published_at" date time />

If you only want a timepicker, you can discard the date attribute, and pass custom Flatpickr options to the time attribute:

<Input name="published_at" time />

Choices.js

Choices.js uses a SCSS stylesheet to style the library. Our stylesheet extends the vendor stylesheet (of Choices.js) and adds some Tailwind-specific tweaks. Make sure your bundler handles SCSS stylesheets correctly.

You can import the stylesheet in your Vue component:

import "@protonemedia/form-components-pro-vue2-tailwind2-unstyled/src/choices.scss"

Add the choices attribute to the Select component:

<Select name="favorite_framework" :options="frameworks" choices />

This works for selecting multiple values as well:

<Select name="favorite_framework" :options="frameworks" mulitple choices />

You can instantiate Choices.js with a custom set of options (opens new window) by passing an object to the choices attribute:

<Select name="favorite_framework" :options="frameworks" :choices="{ searchEnabled: false }" />