### Interactive Project Setup Prompts

Source: https://github.com/formkit/docs-content/blob/master/_install/cli.md

These are examples of the prompts you will encounter when running `create-app`. Your selections determine the project's configuration.

```sh
✔ Please enter a name for the project › <your-project-name>
✔ What framework would you like to use? › Vite / Nuxt
✔ What language should be used? › TypeScript / Javascript
✔ Would you like to install FormKit Pro? › no / yes
```

--------------------------------

### Install Dependencies and Start Development Server

Source: https://github.com/formkit/docs-content/blob/master/5.guides/create-a-tailwind-theme.md

Install project dependencies and start the development server for your FormKit theme using pnpm.

```bash
# or npm or yarn
pnpm install
pnpm dev
```

--------------------------------

### Post-Creation Commands for New App

Source: https://github.com/formkit/docs-content/blob/master/_install/cli.md

After the project is created, follow these commands to navigate into your project directory, install dependencies, and start the development server.

```sh
Created formkit-app!

To run your new app:
📁 cd <your-project-name>
✅ npm install
🚀 npm run dev
```

--------------------------------

### Create a New FormKit App

Source: https://github.com/formkit/docs-content/blob/master/_install/cli.md

Run this command in your terminal to start the interactive project creation process. It will guide you through framework, language, and FormKit Pro installation choices.

```sh
npx formkit@latest create-app
```

--------------------------------

### Install Zod Plugin

Source: https://github.com/formkit/docs-content/blob/master/4.plugins/zod.md

Install the @formkit/zod package using yarn.

```bash
yarn add @formkit/zod
```

--------------------------------

### Install @formkit/addons

Source: https://github.com/formkit/docs-content/blob/master/4.plugins/.maxlength-countdown.md

Install the addons package using yarn to enable the maxlength countdown plugin.

```bash
yarn add @formkit/addons
```

--------------------------------

### Install FormKit Pro Package

Source: https://github.com/formkit/docs-content/blob/master/_install/pro-nuxt.md

Install the `@formkit/pro` package using npm.

```bash
npm install @formkit/pro
```

--------------------------------

### Full Example

Source: https://github.com/formkit/docs-content/blob/master/3.inputs/taglist.md

A comprehensive example demonstrating the Taglist component with custom markup using the `tag` slot and dynamic options loaded from an API.

```APIDOC
## Full example

Now let's combine what we've learned so far by leveraging the `tag` slot for custom markup, and setting the `options` prop to a function that will return pages of movies from an API:

::Example
---
name: "Taglist"
min-height: 550
file: [
  "_examples/taglist/taglist-full-example.vue",
  "_examples/_data/top-movies.js"
]
react-file: [
  "_examples/taglist/taglist-full-example.react.jsx",
  "_examples/_data/top-movies.js"
]
---
::
```

--------------------------------

### Basic URL Input Example

Source: https://github.com/formkit/docs-content/blob/master/3.inputs/url.md

Demonstrates the basic usage of the URL input component. This example is for Vue.js.

```vue
<script setup>
import { FormKitSchema
} from '@formkit/vue'

const schema = [
  {
    $cmp: 'FormKit',
    props: {
      type: 'url',
      name: 'my_url',
      label: 'Your website',
    },
  },
]
</script>

<template>
  <FormKitSchema :nodes="schema" />
</template>
```

--------------------------------

### Basic URL Input Example (React)

Source: https://github.com/formkit/docs-content/blob/master/3.inputs/url.md

Demonstrates the basic usage of the URL input component in a React environment. This example is for React.

```jsx
import React from 'react'
import { FormKitSchema } from '@formkit/react'

const schema = [
  {
    $cmp: 'FormKit',
    props: {
      type: 'url',
      name: 'my_url',
      label: 'Your website',
    },
  },
]

export default function App() {
  return <FormKitSchema nodes={schema} />
}
```

--------------------------------

### Multi-Step Form Example (Vue)

Source: https://github.com/formkit/docs-content/blob/master/5.guides/.build-a-multi-step-form.md

A complete example demonstrating a multi-step form with validity tracking, step navigation, and composable logic for reusability.

```vue
<script setup>
import { reactive, toRef } from 'vue'
import { useSteps } from './useSteps.js'
import { camel2title } from './utils.js'

const steps = reactive({})

const stepPlugin = (node) => {
  if (node.props.type === 'group') {
    steps[node.name] = steps[node.name] || {}
    node.on('created', () => {
      steps[node.name].valid = toRef(node.context.state, 'valid')
    })
    return false
  }
}

const { activeStep, nextStep, previousStep } = useSteps(steps)
</script>

<template>
  <FormKit type="form" :plugins="[stepPlugin]" @submit="() => alert('Form submitted!')">
    <FormKit type="group" name="contactInfo">
      <FormKit type="text" name="email" label="Email" validation="required|email" />
      <FormKit type="text" name="phone" label="Phone" validation="required|~length:10" />
    </FormKit>

    <FormKit type="group" name="organizationInfo">
      <FormKit type="text" name="name" label="Organization Name" validation="required" />
      <FormKit type="text" name="website" label="Website" validation="required|url" />
    </FormKit>

    <FormKit type="group" name="application">
      <FormKit type="textarea" name="bio" label="Bio" validation="required" />
      <FormKit type="checkbox" name="terms" label="Agree to terms" validation="accepted" />
    </FormKit>

    <template #navigation>
      <ul class="steps">
        <li
          v-for="(step, stepName) in steps"
          class="step"
          @click="activeStep = stepName"
          :data-step-valid="step.valid"
          :data-step-active="activeStep === stepName"
        >
          {{ camel2title(stepName) }}
        </li>
      </ul>
    </template>

    <template #actions>
      <div class="actions">
        <button type="button" @click="previousStep" :disabled="!previousStep">Previous</button>
        <button type="button" @click="nextStep" :disabled="!nextStep">Next</button>
      </div>
    </template>
  </FormKit>
</template>

<style>
.steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-between;
  margin-bottom: 2rem;
}

.step {
  cursor: pointer;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  background-color: #eee;
  transition: background-color 0.2s ease;
}

.step[data-step-valid="true"] {
  background-color: #d4edda;
  color: #155724;
}

.step[data-step-active="true"] {
  background-color: #007bff;
  color: white;
}

.actions {
  display: flex;
  justify-content: space-between;
  margin-top: 1rem;
}
</style>
```

```javascript
import { ref, computed } from 'vue'

export function useSteps(steps) {
  const activeStep = ref(Object.keys(steps)[0])

  const nextStep = computed(() => {
    const stepKeys = Object.keys(steps)
    const currentIndex = stepKeys.indexOf(activeStep.value)
    if (currentIndex === stepKeys.length - 1) {
      return false
    }
    return stepKeys[currentIndex + 1]
  })

  const previousStep = computed(() => {
    const stepKeys = Object.keys(steps)
    const currentIndex = stepKeys.indexOf(activeStep.value)
    if (currentIndex === 0) {
      return false
    }
    return stepKeys[currentIndex - 1]
  })

  return { activeStep, nextStep, previousStep }
}
```

```javascript
export function camel2title(str) {
  return str.replace(/([A-Z])/g, ' $1').replace(/^./, (str) => str.toUpperCase())
}
```

--------------------------------

### Install Genesis Theme and Icons

Source: https://github.com/formkit/docs-content/blob/master/_install/styling-css-react.md

Install the FormKit Genesis theme and icon packages using npm.

```sh
npm install @formkit/themes @formkit/icons
```

--------------------------------

### Custom Input Example (React)

Source: https://github.com/formkit/docs-content/blob/master/2.essentials/7.custom-inputs.md

A basic custom input example in React that outputs 'Hello world'. This demonstrates the fundamental structure of a custom input.

```jsx
import { FormKit, defineInput } from '@formkit/react'

defineInput('custom', () => ({ type: 'input', schema: ['Hello world'] }))

export default function App() {
  return <FormKit type="custom" />
}
```

--------------------------------

### Install FormKit Packages

Source: https://github.com/formkit/docs-content/blob/master/_install/astro-react.md

Install the necessary FormKit packages for a React-based Astro project using npm.

```sh
npm install @formkit/react @formkit/core @formkit/inputs
```

--------------------------------

### Custom Input Example (Vue)

Source: https://github.com/formkit/docs-content/blob/master/2.essentials/7.custom-inputs.md

A basic custom input example in Vue that outputs 'Hello world'. This demonstrates the fundamental structure of a custom input.

```vue
<template>
  <FormKit type="custom" />
</template>

<script setup>
import { defineInput } from '@formkit/vue'

defineInput('custom', () => ({ type: 'input', schema: ['Hello world'] }))
</script>
```

--------------------------------

### Basic Time Input Example

Source: https://github.com/formkit/docs-content/blob/master/3.inputs/time.md

Demonstrates the basic usage of the time input component. This example is suitable for Vue.js.

```vue
<template>
  <FormKit type="time" name="time" label="Time" />
</template>
```

--------------------------------

### Custom FormKit configuration with specific plugins and rules

Source: https://github.com/formkit/docs-content/blob/master/5.guides/optimizing-for-production.md

Example of creating a custom FormKit configuration by manually instantiating plugins for validation, i18n, and inputs. This allows for a tree-shakable setup including only the 'required' rule, 'text' input, and specific locales.

```typescript
// file: main.ts
import { createApp } from 'vue'
import App from './App.vue'
import type { FormKitOptions } from '@formkit/core'
import { plugin, bindings } from '@formkit/vue'
import { createValidationPlugin } from '@formkit/validation'
import { required } from '@formkit/rules'
import { createI18nPlugin, en, de } from '@formkit/i18n'
import { createLibraryPlugin, text, form, submit } from '@formkit/inputs'

const library = createLibraryPlugin({ text, form, submit })
const validation = createValidationPlugin({ required })
const i18n = createI18nPlugin({ en, de })

const app = createApp(App)
app.use(plugin, {
  plugins: [library, validation, i18n, bindings]
})
```

--------------------------------

### Basic Date Input Example

Source: https://github.com/formkit/docs-content/blob/master/3.inputs/date.md

Demonstrates a basic FormKit date input. This example is suitable for Vue.js projects.

```vue
<script setup lang="ts">
import { ref } from 'vue'

const value = ref('2023-01-01')
</script>

<template>
  <FormKit type="date" label="Date" v-model="value" />
</template>
```

--------------------------------

### Basic Week Input Example

Source: https://github.com/formkit/docs-content/blob/master/3.inputs/week.md

Demonstrates the basic usage of the week input component. This example is intended for Vue.js.

```vue
<script setup>
import { ref } from 'vue'

const value = ref('2023-W01')
</script>

<template>
  <FormKit type="week" label="Select a week" v-model="value" />
</template>
```

--------------------------------

### Install @formkit/inertia Plugin

Source: https://github.com/formkit/docs-content/blob/master/4.plugins/inertia.md

Install the Inertia plugin using npm. Ensure you have a Laravel project with Inertia Vue.js installed.

```bash
npm install @formkit/inertia
```

--------------------------------

### Full-Featured Slider Example

Source: https://github.com/formkit/docs-content/blob/master/3.inputs/slider.md

A comprehensive example demonstrating a price-range slider combining various FormKit slider props for advanced use cases.

```vue
<script setup>
import { FormKit } from '@formkit/vue'

const priceRange = ref([20, 80])
const priceMarks = [
  { at: 0, label: '$0' },
  { at: 25, label: '$25' },
  { at: 50, label: '$50' },
  { at: 75, label: '$75' },
  { at: 100, label: '$100' },
]
</script>

<template>
  <FormKit 
    type="slider" 
    label="Price range"
    :value="priceRange"
    :min="0"
    :max="100"
    :step="1"
    :marks="priceMarks"
    :mark-labels="true"
    :input-attrs="{
      min: { step: 10 },
      max: { step: 10 },
    }"
    prefix="$"
    suffix=""
    :tooltip="true"
  />
</template>
```

--------------------------------

### Install FormKit Vue Package

Source: https://github.com/formkit/docs-content/blob/master/_install/astro-vue.md

Install the FormKit Vue package using npm.

```sh
npm install @formkit/vue
```

--------------------------------

### Basic Search Input Example

Source: https://github.com/formkit/docs-content/blob/master/3.inputs/search.md

This is a basic example of a search input. It uses the standard FormKit input structure.

```vue
<template>
  <FormKit type="search" name="search" label="Search" placeholder="Search..."></FormKit>
</template>
```

```jsx
import { FormKit } from '@formkit/vue'

export default {
  components: { FormKit },
  setup() {
    return {}
  }
}
```

--------------------------------

### Install Barcode Input

Source: https://github.com/formkit/docs-content/blob/master/4.plugins/barcode.md

Install the barcode input package using npm. This package has a dependency on @zxing/library.

```sh
npm install @formkit/barcode
```

--------------------------------

### Transfer List Full Example (React)

Source: https://github.com/formkit/docs-content/blob/master/3.inputs/transfer-list.md

A comprehensive example demonstrating the FormKit transfer list input in React JSX. Includes API and utility JavaScript files.

```jsx
import { FormKit } from '@formkit/vue'
import { guests } from './guests.js'

export default {
  setup() {
    return {
      guests
    }
  }
}
```

```javascript
export const guests = [
  { value: '1', label: 'John Doe' },
  { value: '2', label: 'Jane Smith' },
  { value: '3', label: 'Peter Jones' },
  { value: '4', label: 'Mary Williams' },
  { value: '5', label: 'David Brown' },
  { value: '6', label: 'Sarah Davis' },
  { value: '7', label: 'Michael Miller' },
  { value: '8', label: 'Emily Wilson' },
  { value: '9', label: 'Daniel Moore' },
  { value: '10', label: 'Olivia Taylor' }
]
```

```javascript
// utils.js
// This file is intentionally left blank for the example.
```

--------------------------------

### Tel Input Example

Source: https://github.com/formkit/docs-content/blob/master/3.inputs/tel.md

This example demonstrates the basic usage of the tel input component. It is intended for general telephone number entry.

```vue
<script setup>
import { FormKit 
} from '@formkit/vue'
</script>

<template>
  <FormKit type="tel" label="Phone number" />
</template>
```

```jsx
import { FormKit } from '@formkit/vue'

export default function TelInput() {
  return (
    <FormKit type="tel" label="Phone number" />
  )
}
```

--------------------------------

### Basic Datetime-local Input Example

Source: https://github.com/formkit/docs-content/blob/master/3.inputs/datetime-local.md

Demonstrates the basic usage of the datetime-local input component. This example shows how to integrate the native HTML datetime-local picker within a FormKit form.

```vue
<script setup lang="ts">
import { FormKitInput } from '@formkit/vue'
</script>

<template>
  <FormKitInput type="datetime-local" name="datetime" label="Select a date and time" />
</template>
```

```jsx
import React from 'react';
import { FormKitInput } from '@formkit/react';

function MyForm() {
  return (
    <FormKitInput type="datetime-local" name="datetime" label="Select a date and time" />
  );
}

export default MyForm;
```

--------------------------------

### Transfer List Full Example (Vue)

Source: https://github.com/formkit/docs-content/blob/master/3.inputs/transfer-list.md

A comprehensive example demonstrating the FormKit transfer list input in a Vue template. Includes API and utility JavaScript files.

```vue
<template>
  <FormKit
    type="transferlist"
    name="transfer"
    label="Transfer list"
    source-label="Available guests"
    target-label="VIP guests"
    :options="guests"
  />
</template>

<script setup>
import { guests } from './guests.js'
</script>
```

```javascript
export const guests = [
  { value: '1', label: 'John Doe' },
  { value: '2', label: 'Jane Smith' },
  { value: '3', label: 'Peter Jones' },
  { value: '4', label: 'Mary Williams' },
  { value: '5', label: 'David Brown' },
  { value: '6', label: 'Sarah Davis' },
  { value: '7', label: 'Michael Miller' },
  { value: '8', label: 'Emily Wilson' },
  { value: '9', label: 'Daniel Moore' },
  { value: '10', label: 'Olivia Taylor' }
]
```

```javascript
// utils.js
// This file is intentionally left blank for the example.
```

--------------------------------

### Install FormKit Icons

Source: https://github.com/formkit/docs-content/blob/master/_install/styling-tailwind.md

Install the FormKit icons package to include icons directly in your bundle for improved performance and to avoid potential SSR issues.

```bash
npm install @formkit/icons
```

--------------------------------

### Complete Multi-Step Form Example (React)

Source: https://github.com/formkit/docs-content/blob/master/5.guides/.build-a-multi-step-form.md

A fully functional multi-step form example in React, including navigation buttons, a fake backend for error simulation, and disabled submit button until valid.

```jsx
import React, { useState, useEffect } from 'react';
import { FormKit } from '@formkit/vue'; // Assuming FormKit is used similarly in React or a wrapper exists
import { useSteps } from './useSteps.react';
import { submitApp } from './utils';

// Mock FormKit component for React context if not directly available
const FormKitMock = ({ type, onSubmit, children }) => {
  const [formData, setFormData] = useState({});
  const [errors, setErrors] = useState({});
  const [fieldErrors, setFieldErrors] = useState({});

  const node = {
    clearErrors: () => {
      setErrors({});
      setFieldErrors({});
    },
    setErrors: (formErrs, fieldErrs) => {
      setErrors(formErrs);
      setFieldErrors(fieldErrs);
    }
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    // In a real scenario, formData would be collected from inputs
    // For this mock, we'll assume it's passed or managed externally
    onSubmit(formData, node);
  };

  // This is a simplified mock. A real FormKit integration would handle data binding.
  const handleInputChange = (name, value) => {
    setFormData(prev => ({ ...prev, [name]: value }));
  };

  // Pass down handleInputChange to children if they are form inputs
  const childrenWithProps = React.Children.map(children, child =>
    React.cloneElement(child, { onInputChange: handleInputChange, errors: fieldErrors[child.props.name] })
  );

  return (
    <form onSubmit={handleSubmit}>
      {childrenWithProps}
      <button type="submit" disabled={!isLastStep || !stepIsValid}>Submit</button>
    </form>
  );
};

// Mock useSteps hook for React
const useSteps = (initialStep = 0) => {
  const [currentStep, setCurrentStep] = useState(initialStep);
  const totalSteps = 3; // Example: Define the total number of steps

  const isFirstStep = currentStep === 0;
  const isLastStep = currentStep === totalSteps - 1;

  // Mock step validity - replace with actual validation logic
  const [stepIsValid, setStepIsValid] = useState(false);

  const nextStep = () => {
    if (!isLastStep) {
      setCurrentStep(prev => prev + 1);
    }
  };

  const prevStep = () => {
    if (!isFirstStep) {
      setCurrentStep(prev => prev - 1);
    }
  };

  // Effect to update step validity based on form state (simplified)
  useEffect(() => {
    // In a real app, this would check the validity of fields in the current step
    console.log('Updating step validity for step:', currentStep);
    setStepIsValid(true); // Assume valid for this example
  }, [currentStep]);

  return {
    currentStep,
    nextStep,
    prevStep,
    isFirstStep,
    isLastStep,
    stepIsValid
  };
};

const MultiStepForm = () => {
  const { currentStep, nextStep, prevStep, isFirstStep, isLastStep, stepIsValid } = useSteps();
  const [formState, setFormState] = useState({});
  const [isSubmitDisabled, setIsSubmitDisabled] = useState(true);

  const handleFormUpdate = (data) => {
    setFormState(data);
    // Basic check for submit button state
    setIsSubmitDisabled(!(isLastStep && stepIsValid));
  };

  // Effect to update submit button state when step validity changes
  useEffect(() => {
    setIsSubmitDisabled(!(isLastStep && stepIsValid));
  }, [isLastStep, stepIsValid]);

  const handleSubmit = async (formData, node) => {
    if (!isSubmitDisabled) {
      await submitApp(formData, node);
    } else {
      console.log('Form is not valid, submit disabled.');
    }
  };

  return (
    <div>
      <h1>Multi-Step Application Form</h1>
      <FormKitMock type="form" onSubmit={handleSubmit}>
        {{/* Step 1: Personal Information */}}
        {currentStep === 0 && (
          <div>
            <label>Name: <input type="text" name="name" onChange={(e) => handleFormUpdate({ ...formState, name: e.target.value })} /></label>
            <label>Email: <input type="email" name="email" onChange={(e) => handleFormUpdate({ ...formState, email: e.target.value })} /></label>
          </div>
        )}

        {{/* Step 2: Experience */}}
        {currentStep === 1 && (
          <div>
            <label>Age: <input type="number" name="age" onChange={(e) => handleFormUpdate({ ...formState, age: parseInt(e.target.value) })} /></label>
            <label>Experience: <textarea name="experience" onChange={(e) => handleFormUpdate({ ...formState, experience: e.target.value })}></textarea></label>
          </div>
        )}

        {{/* Step 3: Portfolio */}}
        {currentStep === 2 && (
          <div>
            <label>Portfolio URL: <input type="url" name="portfolio" onChange={(e) => handleFormUpdate({ ...formState, portfolio: e.target.value })} /></label>
            <label>Bio: <textarea name="bio" onChange={(e) => handleFormUpdate({ ...formState, bio: e.target.value })}></textarea></label>
          </div>
        )}

        <div style={{ marginTop: '20px' }}>
          {!isFirstStep && <button type="button" onClick={prevStep}>Previous</button>}
          {!isLastStep && <button type="button" onClick={nextStep}>Next</button>}
          {isLastStep && (
            <button type="submit" disabled={isSubmitDisabled}>Submit Application</button>
          )}
        </div>
      </FormKitMock>
    </div>
  );
};

export default MultiStepForm;

```

```javascript
import { computed, ref } from 'vue';

export function useSteps(initialStep = 0) {
  const currentStep = ref(initialStep);
  const totalSteps = 3; // Define the total number of steps

  const isFirstStep = computed(() => currentStep.value === 0);
  const isLastStep = computed(() => currentStep.value === totalSteps - 1);

  // Mock step validity - replace with actual validation logic
  const stepIsValid = computed(() => {
    // In a real app, this would check the validity of fields in the current step using FormKit's state
    console.log('Checking step validity for step:', currentStep.value);
    return true; // Assume valid for this example
  });

  const nextStep = () => {
    if (!isLastStep.value) {
      currentStep.value++;
    }
  };

  const prevStep = () => {
    if (!isFirstStep.value) {
      currentStep.value--;
    }
  };

  return {
    currentStep,
    nextStep,
    prevStep,
    isFirstStep,
    isLastStep,
    stepIsValid
  };
}

```

```javascript
import axios from 'axios';

export const submitApp = async (formData, node) => {
  console.log('Submitting form data:', formData);
  try {
    // Simulate a POST request to a backend
    const response = await axios.post('/api/submit-application', formData, {
      headers: {
        'Content-Type': 'application/json'
      }
    });
    console.log('Submission successful:', response.data);
    node.clearErrors();
    alert('Your application was submitted successfully!');
    return response.data;
  } catch (error) {
    console.error('Submission failed:', error.response?.data || error.message);
    // Simulate backend errors
    const formErrors = error.response?.data?.formErrors || [];
    const fieldErrors = error.response?.data?.fieldErrors || {};

    node.setErrors(formErrors, fieldErrors);
    alert('There were errors submitting your application. Please check the form.');
    return null;
  }
};

// Mock axios post for local testing if needed
if (typeof axios !== 'undefined') {
  axios.post = async (url, data) => {
    console.log(`Mock POST request to ${url} with data:`, data);
    await new Promise(resolve => setTimeout(resolve, 500));
    if (data.age < 18) {
      const error = new Error('Validation failed');
      error.response = {
        status: 400,
        data: {
          formErrors: ['You must be 18 or older to apply.'],
          fieldErrors: {
            age: ['Age must be 18 or older.']
          }
        }
      };
      throw error;
    }
    return {
      status: 200,
      data: { message: 'Application submitted successfully' }
    };
  };
}

```

--------------------------------

### Basic Email Input Example

Source: https://github.com/formkit/docs-content/blob/master/3.inputs/email.md

Demonstrates the usage of the email input in a Vue.js application. This example shows how to integrate the FormKit email input component.

```vue
<template>
  <FormKit type="email" name="email" label="Your email address" placeholder="jane.doe@example.com" />
</template>

<script setup>
import { FormKit } from '@formkit/vue'
</script>
```

--------------------------------

### Basic Meta Input Example

Source: https://github.com/formkit/docs-content/blob/master/3.inputs/meta.md

This example demonstrates the basic usage of the meta input. It's used for including arbitrary data in your forms without displaying it to end users.

```vue
<script setup>
import { ref } from 'vue'

const formData = ref({
  metaField: 'some-arbitrary-data'
})
</script>

<template>
  <FormKit type="form" v-model="formData">
    <FormKit type="meta" name="metaField" />
    <FormKit type="text" name="regularField" label="A visible field" />
  </FormKit>
</template>
```

```jsx
import { FormKit } from '@formkit/vue'
import { ref } from 'vue'

const formData = ref({
  metaField: 'some-arbitrary-data'
})

const App = () => (
  <FormKit type="form" v-model={formData.value}>
    <FormKit type="meta" name="metaField" />
    <FormKit type="text" name="regularField" label="A visible field" />
  </FormKit>
)
```

--------------------------------

### Full example form (Vue)

Source: https://github.com/formkit/docs-content/blob/master/3.inputs/form.md

A fully featured form example including various input types, help text, labels, validation with custom messages, and error/submission handling.

```vue
<script setup>
import { ref } from 'vue'

const formData = ref({
  name: '',
  email: '',
  password: '',
  confirm_password: '',
})

const handleSubmit = async (data) => {
  console.log('Form submitted:', data)
  // Replace with your actual submission logic
  await new Promise((resolve) => setTimeout(resolve, 1000))
  alert('Form submitted successfully!')
}
</script>

<template>
  <FormKit type="form" @submit="handleSubmit" v-model="formData">
    <FormKit type="text" name="name" label="Name" validation="required" />
    <FormKit type="email" name="email" label="Email Address" validation="required|email" />
    <FormKit type="password" name="password" label="Password" validation="required|length:6,12" />
    <FormKit
      type="password"
      name="confirm_password"
      label="Confirm Password"
      validation="required|confirm"
      validation-label="password confirmation"
    />
  </FormKit>
</template>

<style>
.formkit-wrapper {
  max-width: 500px;
  margin: 0 auto;
  padding: 2rem;
  border: 1px solid #ccc;
  border-radius: 8px;
}

.formkit-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.formkit-label {
  font-weight: bold;
}

.formkit-input,
.formkit-textarea {
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.formkit-messages {
  color: red;
}

.formkit-submit-wrapper {
  margin-top: 1rem;
}

.formkit-submit {
  padding: 0.75rem 1.5rem;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.formkit-submit:hover {
  background-color: #0056b3;
}
</style>
```

--------------------------------

### Complete Multi-Step Form Example (Vue)

Source: https://github.com/formkit/docs-content/blob/master/5.guides/.build-a-multi-step-form.md

A fully functional multi-step form example in Vue, including navigation buttons, a fake backend for error simulation, and disabled submit button until valid.

```vue
import { ref } from 'vue'
import { useSteps } from './useSteps'
import { submitApp } from './utils'

const { currentStep, nextStep, prevStep, isFirstStep, isLastStep, stepIsValid } = useSteps()

const appForm = ref({
  name: '',
  email: '',
  age: undefined,
  experience: '',
  portfolio: '',
  bio: '',
  github: '',
  twitter: ''
})

const submitButtonDisabled = ref(true)

const updateSubmitButtonState = () => {
  submitButtonDisabled.value = !(isLastStep.value && stepIsValid.value)
}

// Watch for changes in step validity to update the submit button state
// This is a simplified example; a more robust solution might involve watching individual field validity
// For this example, we'll assume stepIsValid is reactive and updated by useSteps
// In a real app, you'd likely want to watch specific fields or use FormKit's validation events

// Example of how you might trigger an update (this logic would be within useSteps or FormKit's validation)
// For demonstration, let's assume stepIsValid is updated when fields change within a step

// Initial check
updateSubmitButtonState()

// In a real scenario, you'd need to ensure stepIsValid is reactive and updates correctly.
// For instance, if useSteps provides a way to track the validity of the current step's fields:
// watch(currentStep, updateSubmitButtonState, { deep: true })
// watch(appForm, updateSubmitButtonState, { deep: true })

// For this example, we'll manually call it or assume it's handled reactively.
// Let's add a placeholder for when the form is submitted to re-evaluate validity
const handleFormSubmit = async (formData, node) => {
  updateSubmitButtonState() // Ensure state is correct before submit
  if (!submitButtonDisabled.value) {
    await submitApp(formData, node)
  } else {
    // Optionally, focus the first invalid field or show a message
    console.log('Form is not valid, submit disabled.')
  }
}

```

```javascript
import { computed, ref, watch } from 'vue'

export function useSteps(initialStep = 0) {
  const currentStep = ref(initialStep)
  const steps = ref([]) // This would be populated by the form structure

  const isFirstStep = computed(() => currentStep.value === 0)
  const isLastStep = computed(() => currentStep.value === steps.value.length - 1)

  // Placeholder for step validity logic
  // In a real app, this would depend on FormKit's validation state for the current step's fields
  const stepIsValid = computed(() => {
    // This is a mock implementation. Replace with actual FormKit validation checks.
    console.log('Checking step validity for step:', currentStep.value)
    // Example: Check if all required fields in the current step are valid
    // This requires access to FormKit's node or validation state.
    // For now, let's assume it's true if not the last step, or if it is the last step and some condition is met.
    if (isLastStep.value) {
      // Simulate validity check for the last step
      return true // Replace with actual check
    }
    return true // Assume valid for intermediate steps for this example
  })

  const nextStep = () => {
    if (!isLastStep.value) {
      currentStep.value++
    }
  }

  const prevStep = () => {
    if (!isFirstStep.value) {
      currentStep.value--
    }
  }

  // Function to set the total number of steps, typically called after form definition
  const setSteps = (stepCount) => {
    steps.value = Array.from({ length: stepCount })
  }

  return {
    currentStep,
    nextStep,
    prevStep,
    isFirstStep,
    isLastStep,
    stepIsValid,
    setSteps
  }
}

```

```javascript
import axios from 'axios';

export const submitApp = async (formData, node) => {
  console.log('Submitting form data:', formData);
  try {
    // Simulate a POST request to a backend
    // Replace with your actual API endpoint
    const response = await axios.post('/api/submit-application', formData, {
      headers: {
        'Content-Type': 'application/json'
      }
    });
    console.log('Submission successful:', response.data);
    node.clearErrors();
    alert('Your application was submitted successfully!');
    return response.data;
  } catch (error) {
    console.error('Submission failed:', error.response?.data || error.message);
    // Simulate backend errors
    const formErrors = error.response?.data?.formErrors || [];
    const fieldErrors = error.response?.data?.fieldErrors || {};

    // Example of setting errors
    node.setErrors(formErrors, fieldErrors);
    alert('There were errors submitting your application. Please check the form.');
    return null;
  }
};

// Mock axios post for local testing if needed
if (typeof axios !== 'undefined') {
  axios.post = async (url, data) => {
    console.log(`Mock POST request to ${url} with data:`, data);
    // Simulate a successful response after a delay
    await new Promise(resolve => setTimeout(resolve, 500));
    // Simulate an error response for testing error handling
    if (data.age < 18) {
      const error = new Error('Validation failed');
      error.response = {
        status: 400,
        data: {
          formErrors: ['You must be 18 or older to apply.'],
          fieldErrors: {
            age: ['Age must be 18 or older.']
          }
        }
      };
      throw error;
    }
    return {
      status: 200,
      data: { message: 'Application submitted successfully' }
    };
  };
}

```

--------------------------------

### Custom Input Plugin Example

Source: https://github.com/formkit/docs-content/blob/master/2.essentials/7.custom-inputs.md

This example demonstrates how to create a custom input using a FormKit plugin. It shows how plugins can be registered on a parent element to affect child elements, leveraging plugin inheritance.

```vue
<script setup>
import { defineInput, defaultConfig } from '@formkit/vue'

const helloWorld = defineInput((props) => {
  return {
    // ... other props
    props: {
      ...props,
      suffixIcon: 'close',
      prefixIcon: 'search',
    },
  }
})

const config = {
  ...defaultConfig,
  inputs: {
    helloWorld,
  },
}
</script>

<template>
  <FormKit type="helloWorld" label="Hello world" />
</template>

<style>
.formkit-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1em;
}
</style>
```

```jsx
import { defineInput, defaultConfig } from '@formkit/react'

const helloWorld = defineInput((props) => {
  return {
    // ... other props
    props: {
      ...props,
      suffixIcon: 'close',
      prefixIcon: 'search',
    },
  }
})

const config = {
  ...defaultConfig,
  inputs: {
    helloWorld,
  },
}

export default config
```

--------------------------------

### Barcode Input Configuration

Source: https://github.com/formkit/docs-content/blob/master/4.plugins/barcode.md

This snippet shows how to install and configure the barcode input in your FormKit setup for Vue and React.

```APIDOC
## Installation

To install the `barcode` input add the `@formkit/barcode` package to your project's dependencies.

```sh
npm install @formkit/barcode
```

Then, in your FormKit configuration file import the input and its styles. Then add the input to your global FormKit configuration.

::FrameworkOnly{framework="vue"}
```js
// formkit.config
...import { barcode } from '@formkit/barcode'
import '@formkit/barcode/genesis'

...const config = defaultConfig({
  inputs: {
    barcode
  }
})

...```
::

::FrameworkOnly{framework="react"}
```jsx
import { defineFormKitConfig } from '@formkit/react'
import { barcode } from '@formkit/barcode'
import '@formkit/barcode/genesis'

export default defineFormKitConfig({
  inputs: {
    barcode,
  },
})
```
::
```

--------------------------------

### Full Taglist Example with Custom Slot and API Options

Source: https://github.com/formkit/docs-content/blob/master/3.inputs/taglist.md

Combines custom markup using the `tag` slot with dynamic options loaded from an API via a function prop. This example demonstrates advanced customization and data fetching.

```vue
<template>
  <FormKit
    type="taglist"
    name="movies"
    label="Movies"
    :options="fetchMovies"
    :debounce="500"
  >
    <template #tag="{ node, handler, option, index, selected }">
      <div
        class="formkit-tag"
        :class="{
          'formkit-tag-selected': selected,
        }"
        @click="handler('toggle', { node, event })"
      >
        <span class="formkit-tag-label">{{ option.label }}</span>
        <span class="formkit-tag-remove" @click="handler('remove', { node, event })"></span>
      </div>
    </template>
  </FormKit>
</template>

<script setup>
import { ref } from 'vue'

const fetchMovies = async (query) => {
  // Replace with your actual API endpoint
  const response = await fetch(`https://api.example.com/movies?search=${query}`)
  const data = await response.json()
  return data.results.map((movie) => ({
    value: movie.id,
    label: movie.title,
  }))
}
</script>
```

```javascript
export const topMovies = [
  { label: 'The Shawshank Redemption', value: '1' },
  { label: 'The Godfather', value: '2' },
  { label: 'The Dark Knight', value: '3' },
  { label: 'The Godfather Part II', value: '4' },
  { label: '12 Angry Men', value: '5' },
  { label: 'Schindler\'s List', value: '6' },
  { label: 'The Lord of the Rings: The Return of the King', value: '7' },
  { label: 'Pulp Fiction', value: '8' },
  { label: 'The Lord of the Rings: The Fellowship of the Ring', value: '9' },
  { label: 'Forrest Gump', value: '10' },
  { label: 'Star Wars: Episode V - The Empire Strikes Back', value: '11' },
  { label: 'The Matrix', value: '12' },
  { label: 'The Lord of the Rings: The Two Towers', value: '13' },
  { label: 'One Flew Over the Cuckoo\'s Nest', value: '14' },
  { label: 'Goodfellas', value: '15' },
  { label: 'The Green Mile', value: '16' },
  { label: 'Interstellar', value: '17' },
  { label: 'The Silence of the Lambs', value: '18' },
  { label: 'Life Is Beautiful', value: '19' },
  { label: 'Star Wars: Episode IV - A New Hope', value: '20' },
  { label: 'The Usual Suspects', value: '21' },
  { label: 'The Lion King', value: '22' },
  { label: 'Back to the Future', value: '23' },
  { label: 'The Prestige', value: '24' },
  { label: 'The Intouchables', value: '25' },
  { label: 'Whiplash', value: '26' },
  { label: 'The Avengers', value: '27' },
  { label: 'The Shining', value: '28' },
  { label: 'Parasite', value: '29' },
  { label: 'Gladiator', value: '30' },
  { label: 'The Lion King', value: '31' },
  { label: 'The Departed', value: '32' },
  { label: 'The Great Dictator', value: '33' },
  { label: 'Inglourious Basterds', value: '34' },
  { label: 'The Pianist', value: '35' },
  { label: 'The Lives of Others', value: '36' },
  { label: 'The Dark Knight Rises', value: '37' },
  { label: 'The Truman Show', value: '38' },
  { label: 'The Sixth Sense', value: '39' },
  { label: 'The Return of the Jedi', value: '40' },
  { label: 'The Wolf of Wall Street', value: '41' },
  { label: 'The Grand Budapest Hotel', value: '42' },
  { label: 'The Social Network', value: '43' },
  { label: 'The Avengers: Endgame', value: '44' },
  { label: 'The Lord of the Rings: The Return of the King', value: '45' },
  { label: 'The Lord of the Rings: The Fellowship of the Ring', value: '46' },
  { label: 'The Lord of the Rings: The Two Towers', value: '47' },
  { label: 'The Dark Knight', value: '48' },
  { label: 'The Godfather', value: '49' },
  { label: 'The Shawshank Redemption', value: '50' }
]
```

--------------------------------

### Initialize FormKit Starter Theme

Source: https://github.com/formkit/docs-content/blob/master/5.guides/create-a-tailwind-theme.md

Use the FormKit CLI to create a copy of the starter theme for developing a custom global theme. This includes structural styles and comments.

```bash
npx formkit@latest create-theme
```

--------------------------------

### Get FormKit Node by ID (Vue/React Example)

Source: https://github.com/formkit/docs-content/blob/master/2.essentials/10.architecture.md

Demonstrates how to retrieve a FormKit node using its ID. Ensure the input has an `id` attribute.

```vue
<script setup>
import { getNode } from '@formkit/vue'

function logNode() {
  const node = getNode('my-input')
  console.log(node)
}
</script>

<template>
  <FormKit id="my-input" type="text" label="My Input" />
  <button @click="logNode">Log Node</button>
</template>
```

```jsx
import { FormKitNode } from '@formkit/core'
import { useFormKitNodeById } from '@formkit/react'
import { useState, useCallback } from 'react'

function MyForm() {
  const [node, setNode] = useState<FormKitNode | null>(null)

  const handleNode = useCallback((node: FormKitNode) => {
    setNode(node)
    console.log(node)
  }, [])

  useFormKitNodeById('my-input', handleNode)

  return (
    <div>
      <FormKit id="my-input" type="text" label="My Input" />
      {node && <p>Node found!</p>}
    </div>
  )
}
```

--------------------------------

### Basic File Input Example

Source: https://github.com/formkit/docs-content/blob/master/3.inputs/file.md

Demonstrates the basic usage of the file input component. This is suitable for simple file selection scenarios.

```vue
<template>
  <FormKit type="file" name="myFile" />
</template>
```

```jsx
import { FormKit } from '@formkit/vue'

export default {
  components: { FormKit },
}
```

--------------------------------

### Generate Starter FormKit Theme File

Source: https://github.com/formkit/docs-content/blob/master/_install/styling-tailwind-react.md

Generate a starter FormKit theme file using the FormKit CLI.

```sh
npx formkit@latest theme
```

--------------------------------

### Full-featured Example

Source: https://github.com/formkit/docs-content/blob/master/3.inputs/slider.md

Demonstrates a comprehensive use case of the Slider component by combining various props to create a price-range slider.

```APIDOC
## Full-featured example

By combining the provided props for the `slider` component you can create a robust input to cover a variety of usecases. Here is an example for a price-range slider.

::Example
---
name: "Kitchen Sink"
file: [
  "_examples/slider/kitchen-sink.vue",
]
react-file: [
  "_examples/slider/kitchen-sink.react.jsx",
]
ssr: false
---
::
```

--------------------------------

### Install a Published FormKit Theme

Source: https://github.com/formkit/docs-content/blob/master/5.guides/create-a-tailwind-theme.md

Installs a third-party FormKit theme as a dev dependency in your project.

```bash
pnpm add -D formkit-theme-my-theme
```

--------------------------------

### Configure FormKit with Pro Plugin

Source: https://github.com/formkit/docs-content/blob/master/_install/pro.md

Import `createProPlugin` and desired Pro Inputs, then initialize the plugin with your project key and add it to your FormKit configuration. Ensure your project key is kept secure.

```javascript
// main.js or formkit.config.ts
import { createProPlugin, rating, toggle } from '@formkit/pro'

// Create the Pro plugin with your `Project Key` and desired Pro Inputs:
const proPlugin = createProPlugin('fk-00000000000', {
  rating,
  toggle,
  // any other Pro Inputs
})

// add the plugin to your FormKit config:
const config = defaultConfig({
  plugins: [proPlugin],
})
```