### Install Dependencies and Start Theme Development

Source: https://formkit.com/guides/create-a-tailwind-theme

Install project dependencies and start the development server for your FormKit theme. This command assumes you are using pnpm.

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

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

### Install @formkit/addons

Source: https://formkit.com/inputs/multi-step

Install the addons package to use the multi-step plugin. This is the first step before registering the plugin.

```bash
yarn add @formkit/addons

```

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

### Transfer List Full Example with Slots and Data Fetching

Source: https://formkit.com/inputs/transfer-list

Demonstrates a comprehensive transfer list setup with custom slots for displaying detailed option information and functions for fetching, paginating, and searching guest data.

```jsx
<FormKit  type="form"  actions={false}  value={{
    vips: [3, 6],
  }}>
  <FormKit
    name="vips"
    type="transferlist"
    label="Choose VIPs for the party"
    sourceLabel="Guests"
    targetLabel="VIPs"
    sourceEmptyMessage="No guests found"
    targetEmptyMessage="No VIPs selected"
    options={getGuests}
    optionLoader={loadGuest}
    slots={{
      targetOption: ({ option }) => (
        <div style={rowStyle}>
          <span style={avatarStyle}>
            <span style={initialsStyle}>{initials(option.label)}</span>
          </span>
          <div style={infoStyle}>
            <div style={primaryStyle}>{option.label}</div>
            <div style={secondaryStyle}>{option.email}</div>
            <div style={secondaryStyle}>{option.phone}</div>
          </div>
        </div>
      ),
    }}
  /></FormKit>
</FormKit>
```

```javascript
export async function getGuests() {
  try {
    const res = await fetch(
      'https://api-formkit-docs-examples.formkit.workers.dev/guests'
    )
    if (res.ok) {
      const data = await res.json()
      if (data.data) {
        return data.data.map((result) => {
          return {
            label: result.name,
            value: result.id,
          }
        })
      }
    }
  } catch (e) {
    // Handle network errors gracefully
  }
  return []
}
export async function paginateGuests({ page, hasNextPage }) {
  try {
    const res = await fetch(
      `https://api-formkit-docs-examples.formkit.workers.dev/guests?page=${page}`
    )
    if (res.ok) {
      const data = await res.json()
      if (data.data) {
        if (data.current_page < data.total_pages) {
          hasNextPage()
        }
        return data.data.map((result) => {
          return {
            label: result.name,
            value: result.id,
          }
        })
      }
    }
  } catch (e) {
    // Handle network errors gracefully
  }
  return []
}
export async function searchGuests({ search }) {
  if (!search) {
    return []
  }
  try {
    const res = await fetch(
      `https://api-formkit-docs-examples.formkit.workers.dev/guests?search=${search}`
    )
    if (res.ok) {
      const data = await res.json()
      if (data.data) {
        return data.data.map((result) => {
          return {
            label: result.name,
            value: result.id,
          }
        })
      }
    }
  } catch (e) {
    // Handle network errors gracefully
  }
  return []
}
export async function getGuest(id, cachedOption) {
  if (cachedOption) return cachedOption
  try {
    const res = await fetch(
      `https://api-formkit-docs-examples.formkit.workers.dev/guests/${id}`
    )
    if (res.ok) {
      const data = await res.json()
      if (data.data) {
        return {
          label: data.data.name,
          value: data.data.id,
        }
      }
    }
  } catch (e) {
    // Handle network errors gracefully
  }
  return null
}
export async function loadGuest(id, cachedOption) {
  if (cachedOption && cachedOption.hasLoaded) return cachedOption
  try {
    const res = await fetch(
      `https://api-formkit-docs-examples.formkit.workers.dev/guests/${id}`
    )
    if (res.ok) {
      const data = await res.json()
      if (data.data) {
        return {
          name: data.data.name,
          label: data.data.name + ` (age ${data.data.age})`,
          value: data.data.id,
          age: data.data.age,
          phone: data.data.phone,
          email: data.data.email,
          hasLoaded: true,
        }
      }
    }
  } catch (e) {
    // Handle network errors gracefully
  }
  return null
}
```

```javascript
export function initials(str) {
  return str
    .split(' ')
    .slice(0, 2)
    .map((item) => item.charAt(0).toUpperCase())
    .join('')
}
export const michaelJordan = (node) => {
  return node.value[0] === '34'
}
```

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

### Install FormKit Packages

Source: https://formkit.com/getting-started/installation

Install the core FormKit packages for React integration.

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

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

### Install FormKit Theme and Icon Packages

Source: https://formkit.com/getting-started/installation

Install the necessary packages for Tailwind CSS integration and icon support.

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

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

### Install FormKit Pro Package

Source: https://formkit.com/getting-started/installation

Install the FormKit Pro package to enable advanced input types.

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

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

### Install @formkit/zod

Source: https://formkit.com/plugins/zod

Install the Zod plugin for FormKit using yarn.

```bash
yarn add @formkit/zod

```

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

### Dropdown Options Example

Source: https://formkit.com/inputs/dropdown

This example shows how to provide a list of options for a dropdown input. Ensure options are in the format of { label: 'Display Text', value: 'internal_value' }.

```javascript
[
  { label: 'Uruguay', value: 'UY' },
  { label: 'Uzbekistan', value: 'UZ' },
  { label: 'Vanuatu', value: 'VU' },
  { label: 'Venezuela', value: 'VE' },
  { label: 'Viet Nam', value: 'VN' },
  { label: 'Virgin Islands, British', value: 'VG' },
  { label: 'Virgin Islands, U.S.', value: 'VI' },
  { label: 'Wallis and Futuna', value: 'WF' },
  { label: 'Western Sahara', value: 'EH' },
  { label: 'Yemen', value: 'YE' },
  { label: 'Zambia', value: 'ZM' },
  { label: 'Zimbabwe', value: 'ZW' },
]
```

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

### Setup Vue Instance and Module Cache

Source: https://formkit.com/playground

Initializes the Vue instance, manages module caching for FormKit and local components, and handles style injection. This is the core setup for the playground environment.

```javascript
async function setupVueInstance(sourceTemplate) {
var addStyle = (textContent, id) => {
const cssId = id ? id : "component-styles"
var existingCSS = document.getElementById(cssId)
if (existingCSS) {
existingCSS.remove()
}
var css = document.createElement("style")
css.id = cssId
css.appendChild(document.createTextNode(textContent))
var ref = document.head.getElementsByTagName("style")[0] || null
document.head.insertBefore(css, ref ? ref.nextSibling : ref)
}
window.moduleCache = {
vue: window.Vue,
hlj: hljs,
'@formkit/vue': FormKitVue,
'@formkit/core': FormKitCore,
'@formkit/utils': FormKitUtils,
'@formkit/dev': FormKitDev,
'@formkit/i18n': FormKitI18n,
'@formkit/inputs': FormKitInputs,
'@formkit/observer': FormKitObserver,
'@formkit/rules': FormKitRules,
'@formkit/validation': FormKitValidation,
'@formkit/pro': FormKitPro,
'@formkit/themes': FormKitThemes,
'@formkit/icons': FormKitIcons,
'@formkit/addons': FormKitAddons,
'@formkit/auto-animate': FormKitAutoAnimate,
'@formkit/zod': FormKitZod,
'@formkit/drag-and-drop': FormKitDragAndDrop,
'@formkit/tempo': Tempo,
}
// add global window modules to moduleCache
// these are files that originate from the editor itself
if (window.localVueComponents) {
Object.keys(window.localVueComponents).forEach(async (key) => {
var fileContents = window.localVueComponents[key]
window.moduleCache[key] = await window.Vue.defineAsyncComponent(
() => loadModule("Component" + key, {
moduleCache: window.moduleCache,
getFile: () => fileContents,
addStyle,
log(type, ...args) {
console[type]("Render: ", ...args)
},
})
)
})
}
if (window.localModules) {
Object.keys(window.localModules).forEach(async (key) => {
var moduleEntity = window.localModules[key]
var moduleExports = moduleEntity ? Object.keys(moduleEntity) : undefined
if (moduleExports) {
var isOnlyDefault = moduleExports.length === 1 && moduleExports.includes("default")
window.moduleCache[key] = isOnlyDefault ? moduleEntity.default : moduleEntity
}
})
}
var lastPackageOrg = "" // used for tracking relative imports from CDNs such as jsdelivr
var SourceOptions = {
moduleCache: window.moduleCache,
pathResolve({ refPath, relPath }) {
let url = window.importMap[relPath]
if (moduleCache[relPath]) {
return relPath // return a string that will be respected by our import map
}
if (relPath.endsWith(".vue")) {
url = relPath.replace("./", "")
}
else if ( !url && (relPath.startsWith("./") || relPath.startsWith("/")) ) {
// if we did not have an exact match, and the relPath starts with a relative path,
// then try loading from the last library that we were dealing with.
let newPath = relPath.replace("./", "")
newPath = newPath.replace(newPath.match(/@.*$/), "")
newPath = newPath.replace(/(^\/)/, lastPackageOrg)
url = window.importMap[newPath] || ""
}
else if (url && relPath.startsWith("@")) {
// save the package org if it has one in case it requests a relative package within
// the same organization - but with a relative path
lastPackageOrg = relPath.match(/(@.*)\/g) || ""
}
return url
},
getFile: (url) => {
if (!url || url === "example.vue") {
return sourceTemplate
}
else if (url.endsWith(".vue")) {
return url
}
else {
const type = /.*?.js|.mjs$/.test(url) ? ".mjs" : /.*?.vue$/.test(url) ? ".vue" : /.*?.css$/.test(url) ? ".css" : ".mjs"
const getContentData = async (asBinary) => await fetch(url).then((res) => !res.ok ? Promise.reject(url) : asBinary ? res.arrayBuffer() : res.text())
return { getContentData, type }
}
},
addStyle,
log(type, ...args) {
console[type]("Render: ", ...args)
},
}
var HTMLOptions = {
moduleCache: window.moduleCache,
getFile: () => window.HTMLTemplate,
addStyle,
log(type, ...args) {
console[type]("HTML: ", ...args)
},
}
const pro = createProPlugin("fk-52971f34220", inputs)
window.vueApp = getNewApp(SourceOptions, HTMLOptions)
// Allow time for other files to process if we have config
if (window.hasFormKitConfig) {
async function checkConfigIsLoaded() {
return (
window.localModules["formkit.config.js"] &&
window.localModules["formkit.config.js"].default
)
}
let condition = false
let shouldBreak = false
setTimeout(() => {
shouldBreak = true
}, 5000)
do {
condition = await checkConfigIsLoaded()
if (!condition && !shouldBreak) {
await new Promise((resolve) => setTimeout(resolve, 250))
}
} while (!condition && !shouldBreak)
}
const config = window.hasFormKitConfig && window.localModules["formkit.config.js"] ? window.localModules["formkit.config.js"].default : {}
if (Array.isArray(config.plugins)) {
config.plugins.push(pro)
}
else {
config.plugins = [pro]
}
if ("en" !== "en") {
config.locales = Object.assign({}, config.locales, {
en
})
config.config = config.config || {}
config.config.locale = config.config.locale || "en"
}
window.vueApp.use(plugin, defaultConfig(config))
window.vueApp.mount(document.getElementById("app"))
}
function getNewApp(SourceOptions, HTMLOptions) {
if (window.vueApp) {
window.vueApp.unmount()
resetCount()
}
return window.Vue.createApp({
components: {
"source-template": win
```

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

### Basic Textarea Example

Source: https://formkit.com/inputs/textarea

This example demonstrates a basic textarea input with a label, placeholder, character count help text, and validation.

```html
<FormKit  type="textarea"  name="instructions"  label="Your Essay"  placeholder="Remember to write in complete sentences."  help="${value.instructions ? value.instructions.length : 0} / 120"  validation="length:0,120"  validationVisibility="live"  validationMessages={{    length: 'Instructions cannot be more than 120 characters.',  }}/>
```

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

### Search and Select Tag List Example

Source: https://formkit.com/inputs/taglist

Demonstrates a tag list component that allows users to search for and select items. The example shows the expected JSON output for selected tags.

```json
{
  "taglist": [
    "audi",
    "bmw"
  ]
}
```

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

### Install Barcode Input

Source: https://formkit.com/inputs/barcode

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

```bash
npm install @formkit/barcode

```

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

### Install and Import Legacy Genesis CSS Theme

Source: https://formkit.com/essentials/styling

Install the `@formkit/themes` package and import the Genesis `theme.css` file in your main JavaScript entry point.

```bash
npm install @formkit/themes

```

```javascript
import '@formkit/themes/genesis'

```

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

### Full Feature Form Example

Source: https://formkit.com/essentials/forms

A comprehensive example demonstrating a form with various input types, labels, help text, custom validation messages, and submission handling. It includes state management for submission feedback and dynamically hides the form after submission.

```jsx
import { useState } from 'react'import { FormKit } from '@formkit/react'const styles = `  #registration-example {    width: 420px;    padding: 1.5em 1.5em 0 1.5em;    border: 1px solid #e4e4e4;
    border-radius: 1em;
    margin: 0 auto 1em auto;
  }

  #registration-example.hide {
    display: none;
  }

  #registration-example pre {
    margin-bottom: 10px;
  }

  @media (min-width: 400px) {
    #registration-example .double {
      display: flex;
      justify-content: space-between;
    }

    #registration-example .double > * {
      width: calc(50% - 0.25em);
    }

    #registration-example .double > *:first-child {
      margin-right: 0.5em;
    }
  }`

function RegisterExample() {
  const [submitted, setSubmitted] = useState(false)

  async function submitHandler() {
    await new Promise((resolve) => setTimeout(resolve, 1000))
    setSubmitted(true)
  }

  return (
    <>
      <style dangerouslySetInnerHTML={{ __html: styles }} />
      <FormKit
        type="form"
        id="registration-example"
        formClass={submitted ? 'hide' : 'show'}
        submitLabel="Register"
        onSubmit={submitHandler}
        actions={false}
      >
        {( { value } ) => (
          <>
            <h1 className="text-2xl font-bold mb-2">Register!</h1>
            <p className="text-sm mb-4">
              You can put any type of element inside a form, not just FormKit
              inputs (although only FormKit inputs are included with the
              submission).
            </p>
            <FormKit
              type="text"
              name="name"
              label="Your name"
              placeholder="Jane Doe"
              help="What do people call you?"
              validation="required"
            />
            <FormKit
              type="text"
              name="email"
              label="Your email"
              placeholder="jane@example.com"
              help="What email should we use?"
              validation="required|email"
            />
            <div className="double">
              <FormKit
                type="password"
                name="password"
                label="Password"
                validation="required|length:6|matches:/[^a-zA-Z]/"
                validationMessages={{
                  matches: 'Please include at least one symbol',
                }}
                placeholder="Your password"
                help="Choose a password"
              />
              <FormKit
                type="password"
                name="password_confirm"
                label="Confirm password"
                placeholder="Confirm password"
                validation="required|confirm"
                help="Confirm your password"
              />
            </div>
            <FormKit type="submit" label="Register" />
            <pre>{JSON.stringify(value, null, 2)}</pre>
          </>
        )}
      </FormKit>
      {submitted ? (
        <div>
          <h2 className="text-xl text-green-500">Submission successful!</h2>
        </div>
      ) : null}
    </>
  )
}

```

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

### Basic Email Input Example

Source: https://formkit.com/inputs/email

This example demonstrates a basic email input with a label, help text, and validation rules including required, email format, and a specific domain ending (.edu). Validation messages appear live.

```html
<FormKit  type="email"  label="Student email address"  help="Please enter your student email address."  validation="required|email|ends_with:.edu"  validationVisibility="live"  placeholder="vikas@school.edu"/>
```

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

### Submit Theme to themes.formkit.com

Source: https://formkit.com/guides/create-a-tailwind-theme

Use this command to build a theme that can be installed directly by name from themes.formkit.com after it has been merged.

```bash
# installable directly by name from themes.formkit.com once merged
npx formkit@latest theme --theme=my-theme

```

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

### Example Form with Custom Input and Value Display

Source: https://formkit.com/guides/create-a-custom-input

This example integrates the custom `one-time-password` input into a FormKit form. It includes state management for form values and displays the current form data using a `<pre>` tag.

```jsx
import { FormKit, createInput } from '@formkit/react'import OneTimePassword from './one-time-password.react.jsx'const otp = createInput(OneTimePassword)function FirstValueExample() {
  const [values, setValues] = useState({})
  return (
    <>
      <FormKit
        type="form"
        modelValue={values}
        onUpdateModelValue={(value) => setValues(value ?? {})}
      >
        <FormKit
          type={otp}
          label="One-time password"
          name="two_factor_code"
          help="We’ve sent a code to your phone."
          validation="required"
          validationVisibility="live"
        />
      </FormKit>
      <pre>{JSON.stringify(values, null, 2)}</pre>
    </>
  )
}
```

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

### FormKit Configuration with Icons

Source: https://formkit.com/plugins/floating-labels

A FormKit configuration example that includes the floating labels plugin and genesis icons.

```jsx
import { defineFormKitConfig } from '@formkit/react'import { genesisIcons } from '@formkit/icons'import { createFloatingLabelsPlugin } from '@formkit/addons'export default defineFormKitConfig({
  plugins: [createFloatingLabelsPlugin()],
  icons: {
    ...genesisIcons,
  },
})

```

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

### Full Registration Form Example

Source: https://formkit.com/inputs/form

A comprehensive example of a registration form using various FormKit input types, including text, email, password, and submit. It demonstrates custom validation messages, help text, and submission handling. The form's state is managed using React's `useState` hook.

```jsx
import { useState } from 'react'import { FormKit } from '@formkit/react'const styles = `  #registration-example {    width: 420px;    padding: 1.5em 1.5em 0 1.5em;    border: 1px solid #e4e4e4;
    border-radius: 1em;
    margin: 0 auto 1em auto;
  }
  #registration-example.hide {
    display: none;
  }
  #registration-example pre {
    margin-bottom: 10px;
  }
  @media (min-width: 400px) {
    #registration-example .double {
      display: flex;
      justify-content: space-between;
    }
    #registration-example .double > * {
      width: calc(50% - 0.25em);
    }
    #registration-example .double > *:first-child {
      margin-right: 0.5em;
    }
  }`function RegisterExample() {
  const [submitted, setSubmitted] = useState(false)
  async function submitHandler() {
    await new Promise((resolve) => setTimeout(resolve, 1000))
    setSubmitted(true)
  }
  return (
    <>
      <style dangerouslySetInnerHTML={{ __html: styles }} />
      <FormKit
        type="form"
        id="registration-example"
        formClass={submitted ? 'hide' : 'show'}
        submitLabel="Register"
        onSubmit={submitHandler}
        actions={false}
      >
        {({ value }) => (
          <>
            <h1 className="text-2xl font-bold mb-2">Register!</h1>
            <p className="text-sm mb-4">
              You can put any type of element inside a form, not just FormKit
              inputs (although only FormKit inputs are included with the
              submission).
            </p>
            <FormKit
              type="text"
              name="name"
              label="Your name"
              placeholder="Jane Doe"
              help="What do people call you?"
              validation="required"
            />
            <FormKit
              type="text"
              name="email"
              label="Your email"
              placeholder="jane@example.com"
              help="What email should we use?"
              validation="required|email"
            />
            <div className="double">
              <FormKit
                type="password"
                name="password"
                label="Password"
                validation="required|length:6|matches:/[^a-zA-Z]/"
                validationMessages={{
                  matches: 'Please include at least one symbol',
                }}
                placeholder="Your password"
                help="Choose a password"
              />
              <FormKit
                type="password"
                name="password_confirm"
                label="Confirm password"
                placeholder="Confirm password"
                validation="required|confirm"
                help="Confirm your password"
              />
            </div>
            <FormKit type="submit" label="Register" />
            <pre>{JSON.stringify(value, null, 2)}</pre>
          </>
        )}
      </FormKit>
      {submitted ? (
        <div>
          <h2 className="text-xl text-green-500">Submission successful!</h2>
        </div>
      ) : null}
    </>
  )}

```

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

### Barcode Input Configuration with Icons

Source: https://formkit.com/inputs/barcode

A FormKit configuration example that includes the barcode input and icons from the genesis set.

```javascript
import { defineFormKitConfig } from '@formkit/react'import { genesisIcons } from '@formkit/icons'import { barcode } from '@formkit/barcode'import '@formkit/barcode/genesis'export default defineFormKitConfig({
  inputs: {
    barcode,
  },
  icons: {
    ...genesisIcons,
  },
})

```

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

### FormKit Config with Pro and AutoAnimate Plugins

Source: https://formkit.com/plugins/auto-animate

Example FormKit configuration integrating both the Pro plugin and the AutoAnimate plugin.

```javascript
import { defineFormKitConfig } from '@formkit/react'
import { createProPlugin, inputs as proInputs } from '@formkit/pro'
import { genesisIcons } from '@formkit/icons'
import { createAutoAnimatePlugin } from '@formkit/addons'
const pro = createProPlugin('fk-52971f34220', proInputs)
export default defineFormKitConfig({
  plugins: [pro, createAutoAnimatePlugin()],
  icons: {
    ...genesisIcons,
  },
})
```

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

### Supplemental Step Component

Source: https://formkit.com/inputs/multi-step

Example React component for the 'Supplemental' step, containing a single textarea for additional information.

```javascript
import { FormKit } from '@formkit/react'
export default function StepThree() {
  return (
    <FormKit
      type="textarea"
      label="Please supply contact information for 2 references"
      validation="required"
    />
  )
}
```

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

### Step Two Form Inputs

Source: https://formkit.com/plugins/multi-step

Example of inputs for the second step, featuring a textarea and radio buttons for user feedback.

```jsx
import { FormKit } from '@formkit/react'
export default function StepTwo() {
  return (
    <>
      <FormKit
        type="textarea"
        label="Why do you want to work here?"
        validation="required"
      />
      <FormKit
        type="radio"
        label="How did you hear about us"
        validation="required"
        options={[
          { label: 'Google', value: 'google' },
          { label: 'Facebook', value: 'facebook' },
          { label: 'Twitter', value: 'twitter' },
          { label: 'Friend', value: 'friend' },
        ]}
      />
    </>
  )
}

```

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

### Autocomplete with Options

Source: https://formkit.com/inputs/autocomplete

Example of an autocomplete input with a predefined list of options. Ensure options are correctly formatted with 'label' and 'value'.

```javascript
const options = [
  { label: 'United States of America', value: 'US' },
  { label: 'United Kingdom', value: 'GB' },
  { label: 'Afghanistan', value: 'AF' },
  { label: 'Albania', value: 'AL' },
  { label: 'Algeria', value: 'DZ' },
  { label: 'American Samoa', value: 'AS' },
  { label: 'Andorra', value: 'AD' },
  { label: 'Angola', value: 'AO' },
  { label: 'Anguilla', value: 'AI' },
  { label: 'Antarctica', value: 'AQ' },
  { label: 'Antigua and Barbuda', value: 'AG' },
  { label: 'Argentina', value: 'AR' },
  { label: 'Armenia', value: 'AM' },
  { label: 'Aruba', value: 'AW' },
  { label: 'Australia', value: 'AU' },
  { label: 'Austria', value: 'AT' },
  { label: 'Azerbaijan', value: 'AZ' },
  { label: 'Bahamas', value: 'BS' },
  { label: 'Bahrain', value: 'BH' },
  { label: 'Bangladesh', value: 'BD' },
  { label: 'Barbados', value: 'BB' },
  { label: 'Belarus', value: 'BY' },
  { label: 'Belgium', value: 'BE' },
  { label: 'Belize', value: 'BZ' },
  { label: 'Benin', value: 'BJ' },
  { label: 'Bermuda', value: 'BM' },
  { label: 'Bhutan', value: 'BT' },
  { label: 'Bolivia', value: 'BO' },
  { label: 'Bosnia and Herzegovina', value: 'BA' },
  { label: 'Botswana', value: 'BW' },
  { label: 'Bouvet Island', value: 'BV' },
  { label: 'Brazil', value: 'BR' },
  { label: 'British Indian Ocean Territory', value: 'IO' },
  { label: 'British Virgin Islands', value: 'VG' },
  { label: 'Virgin Islands, U.S.', value: 'VI' },
  { label: 'Wallis and Futuna', value: 'WF' },
  { label: 'Western Sahara', value: 'EH' },
  { label: 'Yemen', value: 'YE' },
  { label: 'Zambia', value: 'ZM' },
  { label: 'Zimbabwe', value: 'ZW' },
]
```

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

### NBA All Time Starting Five Static List

Source: https://formkit.com/inputs/list

Use a static list to group related inputs where each input's value becomes an element in an array. This example uses autocomplete inputs for selecting NBA players for a starting five.

```html
<h2 className="text-2xl font-bold mb-4">NBA All Time Starting Five</h2><FormKit type="list">  {({ value }) => (    <>      <FormKit        label="Point Guard"        type="autocomplete"        placeholder="Select a player"        options={nbaTopPlayers}      />      <FormKit        label="Shooting Guard"        type="autocomplete"        placeholder="Select a player"        options={nbaTopPlayers}      />      <FormKit        label="Small Forward"        type="autocomplete"        placeholder="Select a player"        options={nbaTopPlayers}      />      <FormKit        label="Power Forward"        type="autocomplete"        placeholder="Select a player"        options={nbaTopPlayers}      />      <FormKit        label="Center"        type="autocomplete"        placeholder="Select a player"        options={nbaTopPlayers}      />      <pre>{JSON.stringify(value, null, 2)}</pre>    </>  )}</FormKit>
```

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

### Create FormKit Theme CLI Command

Source: https://formkit.com/guides/create-a-tailwind-theme

Initialize a new FormKit theme project using the provided starter theme. This command downloads a functional Vite application with structural styles and comments.

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

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

### FormKit Configuration with Addons and Icons

Source: https://formkit.com/inputs/multi-step

Example FormKit configuration file including the multi-step plugin, genesis icons, and custom root classes.

```javascript
import { defineFormKitConfig } from '@formkit/react'
import { genesisIcons } from '@formkit/icons'
import { createMultiStepPlugin } from '@formkit/addons'
import { rootClasses } from '~/formkit.theme'
export default defineFormKitConfig({
  plugins: [createMultiStepPlugin()],
  icons: {
    ...genesisIcons,
  },
  config: {
    rootClasses,
  },
})
```

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

### Basic Time Input Example

Source: https://formkit.com/inputs/time

Demonstrates a simple time input with a label and help text. The `value` prop sets the initial time.

```html
<FormKit  type="time"  label="Time"  value="23:15"  help="What time will go home today?"/>
```

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

### Configure FormKit with Pro Plugin and Icons

Source: https://formkit.com/essentials/styling

Set up the FormKit configuration with the Pro plugin and Genesis icons. This example demonstrates how to import necessary components and define the configuration object for advanced features.

```javascript
import { genesisIcons } from '@formkit/icons'
import { defineFormKitConfig } from '@formkit/react'
import { createProPlugin, inputs as proInputs } from '@formkit/pro'
const pro = createProPlugin(import.meta.env.VITE_FORMKIT_PRO_KEY, proInputs)
export default defineFormKitConfig({
  plugins: [pro],
  icons: {
    ...genesisIcons,
  },
})
```

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

### Taglist Input Example

Source: https://formkit.com/inputs/taglist

This is a basic example of a FormKit Taglist input. It displays a list of countries that can be selected.

```vue
const countries = [
  { label: 'Virgin Islands, U.S.', value: 'VI' },
  { label: 'Wallis and Futuna', value: 'WF' },
  { label: 'Western Sahara', value: 'EH' },
  { label: 'Yemen', value: 'YE' },
  { label: 'Zambia', value: 'ZM' },
  { label: 'Zimbabwe', value: 'ZW' },
]

<FormKit type="taglist" name="countries" label="Select countries" :options="countries" />
```

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

### Install a Published FormKit Theme

Source: https://formkit.com/guides/create-a-tailwind-theme

Install a third-party FormKit theme as a dev dependency in your project using pnpm.

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

```

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

### Dropdown Input Examples

Source: https://formkit.com/inputs/dropdown

Demonstrates single-select and multi-select dropdowns with different selection appearance options. Requires the 'countries' data import.

```javascript
import countries from '../_data/countries.js'function DropdownExample() {
  return (
    <>
      <FormKit
        type="dropdown"
        label="Single-select"
        placeholder="Pick a country"
        options={countries}
        popover
        defaultValue="FR"
      />
      <FormKit
        type="dropdown"
        label="Truncate appearance"
        placeholder="Pick a country"
        options={countries}
        popover
        multiple
        defaultValue={['FR', 'GR', 'ES']}
      />
      <FormKit
        type="dropdown"
        label="Tags appearance"
        placeholder="Pick a country"
        options={countries}
        popover
        multiple
        selectionAppearance="tags"
        defaultValue={['FR', 'GR', 'ES']}
      />
    </>
  )
}
```

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

### Multi-select Input Example

Source: https://formkit.com/inputs/autocomplete

This example demonstrates a multi-select input. When the `multiple` prop is set, the `value` prop must be an array.

```vue
[
  { label: 'Virgin Islands, British',
    value: 'VG' },
  { label: 'Virgin Islands, U.S.',
    value: 'VI' },
  { label: 'Wallis and Futuna',
    value: 'WF' },
  { label: 'Western Sahara',
    value: 'EH' },
  { label: 'Yemen',
    value: 'YE' },
  { label: 'Zambia',
    value: 'ZM' },
  { label: 'Zimbabwe',
    value: 'ZW' },
]
```

```json
{}
```

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

### Basic Dynamic List Example

Source: https://formkit.com/inputs/list

Demonstrates a dynamic list for managing a guest list. It allows adding and removing guest names, with the current list state displayed below. Use this for simple array inputs where items can be added or removed.

```jsx
<h2 className="text-2xl font-bold mb-4">Guest list</h2><FormKit type="list" value={['']} dynamic>  {({ items, node, value }) => (    <>      {items?.map((item, index) => (        <FormKit          key={`${item}-${index}`}          index={index}          label="Guest name"          placeholder="Guest name"          suffixIcon="trash"          onSuffixIconClick={() =>            node.input(              value.filter((_, itemIndex) => itemIndex !== index)            )          }          sectionsSchema={{            suffixIcon: {              $el: 'button',            },          }}        />      ))}      <FormKit type="button" onClick={() => node.input(value.concat(''))}>        + Add another      </FormKit>      <pre>{JSON.stringify(value, null, 2)}</pre>    </>  )}</FormKit>
```

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

### Basic Mask Input Example

Source: https://formkit.com/inputs/mask

A basic example of a mask input for a phone number. It uses the '+' and '#' characters as tokens for the mask.

```html
<FormKit  type="mask"  name="phone"  mask="+1 (###) ###-####"  label="Phone number"  help="Please enter a phone number"/>
```

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

### Tag List Data Example

Source: https://formkit.com/inputs/taglist

This is an example of the data structure used for a tag list, typically for country selections. Ensure your data matches this format.

```javascript
[
  { label: 'Uzbekistan', value: 'UZ' },
  { label: 'Vanuatu', value: 'VU' },
  { label: 'Venezuela', value: 'VE' },
  { label: 'Viet Nam', value: 'VN' },
  { label: 'Virgin Islands, British', value: 'VG' },
  { label: 'Virgin Islands, U.S.', value: 'VI' },
  { label: 'Wallis and Futuna', value: 'WF' },
  { label: 'Western Sahara', value: 'EH' },
  { label: 'Yemen', value: 'YE' },
  { label: 'Zambia', value: 'ZM' },
  { label: 'Zimbabwe', value: 'ZW' },
]
```

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

### Generate FormKit Theme File

Source: https://formkit.com/getting-started/installation

Generate a starter FormKit theme file using the FormKit CLI.

```bash
npx formkit@latest theme
```

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

### IsSlotCondition Example

Source: https://formkit.com/api-reference/formkit-inputs

An example demonstrating a schema node that would return true for the `isSlotCondition` function. This checks if the current schema node is a slot condition.

```javascript
{
  if: '$slot.name',
  then: '$slot.name',
  else: []
} // this schema node would return true.
```

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

### Using defaultConfig with custom inputs

Source: https://formkit.com/guides/optimizing-for-production

Example of how to use the defaultConfig object syntax to provide configuration options for plugins, specifically adding a custom input.

```javascript
app.use(plugin, defaultConfig({
  inputs: {
    myInput: createInput(/* input options */)
  }
}))
```

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

### Install createThemePlugin in Custom FormKit Config

Source: https://formkit.com/essentials/icons

If not using FormKit's `defaultConfig`, you must manually install the `createThemePlugin` from `@formkit/themes` into your FormKit configuration's plugin array.

```javascript
import { defineFormKitConfig } from '@formkit/react'
import { createThemePlugin } from '@formkit/themes'

export default defineFormKitConfig({
  plugins: [createThemePlugin()],
})
```

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

### Reading Props and Configuration

Source: https://formkit.com/essentials/architecture

Illustrates the best practice of reading configuration and prop data from `node.props`. Explicitly defined props take precedence over configuration options.

```javascript
// @noErrors
import { createNode } from '@formkit/core'

const child = createNode({
  props: {
    flavor: 'cherry',
  },
})
const parent = createNode({
  type: 'group',
  config: {
    size: 'large',
    flavor: 'grape',
  },
  children: [child],
})
console.log(child.props.size)
// outputs: 'large'
console.log(child.props.flavor)
// outputs: 'cherry'

```

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

### Autocomplete Country Filtering Example

Source: https://formkit.com/inputs/autocomplete

This example demonstrates filtering a list of countries for an autocomplete input. Ensure the data is correctly formatted as an array of objects with 'label' and 'value' properties.

```javascript
{ label: 'Vanuatu', value: 'VU' },  { label: 'Venezuela', value: 'VE' },  { label: 'Viet Nam', value: 'VN' },  { label: 'Virgin Islands, British', value: 'VG' },  { label: 'Virgin Islands, U.S.', value: 'VI' },  { label: 'Wallis and Futuna', value: 'WF' },  { label: 'Western Sahara', value: 'EH' },  { label: 'Yemen', value: 'YE' },  { label: 'Zambia', value: 'ZM' },  { label: 'Zimbabwe', value: 'ZW' },
```

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

### Group Validity Example

Source: https://formkit.com/inputs/group

Groups are aware of their children's validation state. This example shows how to conditionally display messages based on the overall validity of the group's children.

```html
<h2 className="text-2xl font-bold mb-4">Register</h2><FormKit name="account" type="group">  {({ state: { valid } }) => (    <>      {!valid ? (        <div className="not-valid" style={invalidStyle}>          Your account details are not complete!        </div>      ) : (        <div className="valid" style={validStyle}>          It all looks good 👍        </div>      )}      <FormKit        label="Username"        name="username"        help="Select a new username"        validation="required|alpha"      />      <FormKit label="Password" name="password" validation="required" />      <FormKit        label="Password"        name="password_confirm"        help="Confirm your password"        validation="required|confirm"      />    </>  )}</FormKit>
```

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

### Basic Datetime-local Input

Source: https://formkit.com/inputs/datetime-local

This example demonstrates a basic datetime-local input with a label, help text, and validation. The `validationVisibility` is set to 'live' to show errors as the user types.

```html
<FormKit  type="datetime-local"  value="2020-03-13T18:22"  label="End of the world"  help="When will the end of the world take place?"  validation="required|date_after"  validationVisibility="live"/>
```

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

### FormKit Setup Context Interface

Source: https://formkit.com/api-reference/formkit-vue

Defines the type for the FormKit component's Vue setup context, including attributes, emit functions, exposed properties, props, and slots.

```typescript
interface FormKitSetupContext<Props extends FormKitInputs<Props>> {
    attrs: any;
    emit: FormKitEvents<Props>;
    expose(exposed:{}): void;
    props:{
}&Props;
    slots: Slots<Props>;
}
```

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

### Accessing Other Inputs with $get

Source: https://formkit.com/essentials/schema

Use the `$get` function within the schema to access the context object of other FormKit inputs by their declared `id`. This enables conditional rendering based on input states.

```javascript
import { FormKitSchema } from '@formkit/react'
const schema = [
  {
    $cmp: 'FormKit',
    props: {
      type: 'select',
      id: 'drink',
      label: 'Drink',
      placeholder: 'Pick your drink',
      options: {
        coffee: 'Drip coffee',
        espresso: 'Espresso shot',
        tea: 'Tea',
      },
      validation: 'required',
    },
  },
  {
    $cmp: 'FormKit',
    if: '$get(drink).value',
    props: {
      type: 'radio',
      label: '$: "Drink options (" + $get(drink).value + ")"',
      options: {
        if: '$get(drink).value === coffee',
        then: ['Large', 'Medium', 'Small'],
        else: {
          if: '$get(drink).value === espresso',
          then: ['Single shot', 'Double shot'],
          else: ['Earl grey', 'Matcha', 'Green tea', 'Jasmine'],
        },
      },
    },
  },
]
function Example() {
  return (
    <>
      <h2 className="text-2xl font-bold mb-4">Order a beverage</h2>
      <FormKitSchema schema={schema} />
    </>
  )
}
```