Export and restructure inputs

    FormKit inputs ship with a lot of markup. This is useful for ensuring inputs are written in an accessible manner. However, sometimes it makes sense to modify the existing structure of a FormKit input. Using the FormKit CLI, we can export FormKit's open source inputs and modify their original structure — or even their functionality.

    In this guide, we'll export the text input, and restructure it to better support a floating label design.

    Export via CLI

    FormKit comes with its own CLI to make exporting inputs a breeze. At the base directory of your project, run:

    Running this command prompts you to select any of FormKit's open source inputs to export:

    We're going to select the text input and allow the CLI to create a new /inputs directory within /src:

    Taking a look at our exported input, text.js, we can see the underlying sections that make up the FormKit input. These sections are provided as small composable functions. Each section represents a single FormKitSchemaNode and the arguments passed to that section are its children:

    In this example, we are not going to overwrite the default FormKit text input, but instead, create a custom text input that is going to use floating labels. Let's go ahead and rename the text file we just exported to floatingLabelTextInput.js:

    In floatingLabelTextInput.js, let's change the name of the exported variable to floatingLabelTextInput from text.

    ...
    export const t̶e̶x̶t̶ floatingLabelTextInput = {
      ...
    }
    
    

    Register input

    To globally register our "new" input, we need add our floatingLabelTextInput to the global config. We can do this wherever we are registering the FormKit plugin:

    Modifying schema

    Now we're going to modify the schema of floatingLabelTextInput to better support floating labels, which are usually implemented using the CSS sibling selector: ~. In order to use a CSS selector like :focus ~ label, our <label> tag needs to be placed after our <input> tag. With our schema already exported, this change is easy to make:

    Using helpers

    The @formkit/inputs package exports a number of helper functions that can be easily applied to the composable schema functions. Available helpers are:

    Importing the $attrs function from FormKit's input package allows us to extend the schema of any section with additional attributes. In this example, we are using it to modify the label section and change its class from formkit-label to formkit-label-floating. Additionally, we’ll add a data-has-value attribute:

    After adding appropriate styling, we can see that our new custom input has its <label> moved within the HTML structure and uses floating labels:

    Load Live Example

    Next steps

    In this guide, we exported the built-in text input using FormKit's CLI tool, and used the exported file as a starting point for a new floating label variation. However, the export feature enables developers to do much more than that! Whether replacing FormKit's existing inputs, or adding new custom inputs with modified, added, removed, or moved sections — we look forward to seeing all the ways you use this feature!

    Learn more about creating custom inputs. Read the guide