Styling

FormKit ships robust and accessible markup — but with no assumptions about your desired styles. There is an optional base theme (as seen in these docs) called Genesis that you can use in your projects.

Installing Genesis theme

To install Genesis, first install the @formkit/themes package.

Then in your main.js (wherever you boot Vue up) include the Genesis theme.css (this assumes you are using a build tool like Vite, Webpack, Snopack, or Nuxt):

Custom classes

Most users will want to apply their own styles and classes to FormKit's provided markup. FormKit provides numerous methods to apply classes for your project.

Classes can be modified for all sections using any of the following methods (from highest to lowest specificity):

• The {section-key}-class props. (most specific)
• The classes prop.
• The classes configuration option.
• The rootClasses configuration function. (least specific)

The classes follow a strict hierarchy. Initially, classes are produced by the rootClasses function. They can then be modified by the classes configuration option, then by the classes prop, and finally by the {section-key}-class prop. At each of these stages classes can be appended, reset, or selectively modified.

Appending classes

To append a class, simply return the string you want to append, or provide an object of classes with boolean values — true properties will be appended:

Resetting classes

Classes produced by all earlier hierarchy steps can be completely removed by providing a special (not rendered) class $reset in either string format or object format:

Removing classes

Classes produced by an earlier step in the class hierarchy can be selectively removed by providing an object with the value false for the class you want to remove. This includes removing formkit's default formkit- prefixed classes:

Section-key class props

The simplest way to modify the classes of an element inside a FormKit input is via the {section-key}-class props. To add a class to a specific section element, like label, you simply add the label-class prop:

Classes prop

The classes prop is similar to the section-key class prop except it allows setting classes on all sections at the same time:

Classes configuration

The classes configuration option is similar to the classes prop, except it applies to all inputs the configuration is applied to. FormKit's unique configuration system allows for you to apply classes globally on your project or just inputs within a certain group or form:

Global class configuration

Class configuration on a group, list, or form

Root classes function

rootClasses is a configuration function that is responsible for producing the default classes for each element. This function already has a default value which produces all the default classes (like formkit-outer and formkit-label) that ship with FormKit — so replacing this single function allows you to easily replace all initial classes. This makes it an ideal candidate for writing custom themes when using utility frameworks like Tailwind.

The rootClasses function is passed 2 arguments (respectively):

• The section key (like label or input).
• The input’s node.

The function will be called once for each section and it must return an object of classes with boolean values.

While typical usage of rootClasses is at the global config level to apply classes to your entire project - you can also use it with the config prop to override a specific form or input within your project with a class list computed from the logic within your provided function:

Tailwind CSS Example

Due to the rootClasses function's ability to modify every form within your project when used at the global config level, it becomes easy to intelligently apply default class lists to your inputs.

Configuring Tailwind with rootClasses in the global config

That's a lot of markup! In reality you'll probably want to create your rootClasses function as a FormKit plugin in a separate file (or npm installable theme!) and import it and provide it to the defaultConfig.

An example using Tailwind from the global config

Because we have set our Tailwind classes in our global config, our inputs now inherit the correct class lists automatically. You can override the classes further from here - such as in the case of the second text input here.

Modifying classes within schema

In addition to modifying classes via config or props on a <FormKit> component, you can use the same techniques within schema:

Section-key class props within schema

Within schema, you can also modify the classes of an element inside an input via the {section-key}Class properties. For example, to add a class to the label section, you can add the labelClass property:

Classes prop within schema

Much like the classes prop on a <FormKit> component, you can modify the class list for any section of an input with the classes property on a schema node:

Config within schema

Since config is passed down to descendant inputs, you can alter classes via config on a parent, such as a form, list, or a group, and this will affect all descendants to any depth: