Nuxt UI FormKit

Appearance

Input Components ​

Comprehensive list of all FormKit-wrapped Nuxt UI input components with schema-based examples.

Overview ​

Nuxt UI FormKit provides fully-featured input components. All examples below show schema-based usage - the recommended approach for building forms.

Schema-First

All components are designed to work seamlessly in schemas. Template usage is also supported but schemas are the recommended pattern.

Text Inputs ​

nuxtUIInput ​

Text input component supporting various input types (text, email, password, url, tel, number, search).

📖 Nuxt UI reference: Input

Schema Example:

typescript
const schema = [
  {
    $formkit: 'nuxtUIInput',
    name: 'email',
    label: 'Email Address',
    inputType: 'email',
    placeholder: 'your.email@example.com',
    leadingIcon: 'i-lucide-mail',
    validation: 'required|email'
  }
]

Full Example:

vue
<template>
  <FUDataEdit :data="data" :schema="schema" />
</template>

<script setup lang="ts">
const data = ref({ email: '' })

const schema = [
  {
    $formkit: 'nuxtUIInput',
    name: 'email',
    label: 'Email Address',
    inputType: 'email',
    placeholder: 'your.email@example.com',
    leadingIcon: 'i-lucide-mail',
    trailingIcon: 'i-lucide-check',
    size: 'lg',
    validation: 'required|email'
  }
]
</script>

Key Props:

  • inputType - HTML input type (text, email, password, url, tel, search)
  • placeholder - Placeholder text
  • leadingIcon - Icon before input
  • trailingIcon - Icon after input
  • size - Input size (xs, sm, md, lg, xl)

nuxtUITextarea ​

Multi-line text input with auto-resize functionality.

📖 Nuxt UI reference: Textarea

Schema Example:

typescript
const schema = [
  {
    $formkit: 'nuxtUITextarea',
    name: 'message',
    label: 'Message',
    rows: 4,
    autoresize: true,
    placeholder: 'Enter your message...',
    validation: 'required|length:10'
  }
]

nuxtUIInputNumber ​

Number input with increment/decrement buttons and formatting options.

📖 Nuxt UI reference: InputNumber

Schema Example:

typescript
const schema = [
  {
    $formkit: 'nuxtUIInputNumber',
    name: 'price',
    label: 'Price',
    min: 0,
    step: 0.01,
    formatOptions: {
      style: 'currency',
      currency: 'USD'
    },
    validation: 'required|min:0'
  }
]

Key Props:

  • locale - BCP 47 locale used for number formatting (e.g. 'de-DE')
  • readonly - Render as read-only

Selection Components ​

nuxtUISelect ​

Dropdown select with search functionality.

📖 Nuxt UI reference: Select

Schema Example:

typescript
const schema = [
  {
    $formkit: 'nuxtUISelect',
    name: 'country',
    label: 'Country',
    options: ['USA', 'UK', 'Canada', 'Australia'],
    placeholder: 'Select a country',
    validation: 'required'
  }
]

With Objects:

typescript
const schema = [
  {
    $formkit: 'nuxtUISelect',
    name: 'role',
    label: 'User Role',
    options: [
      { label: 'Administrator', value: 'admin' },
      { label: 'Editor', value: 'editor' },
      { label: 'Viewer', value: 'viewer' }
    ]
  }
]

Key Props:

  • content - Positioning/behavior config for the dropdown content

nuxtUISelectMenu ​

Advanced select with grouping and multiple selection support.

📖 Nuxt UI reference: SelectMenu

Schema Example:

typescript
const schema = [
  {
    $formkit: 'nuxtUISelectMenu',
    name: 'technologies',
    label: 'Technologies',
    multiple: true,
    options: [
      {
        label: 'Frontend',
        children: [
          { label: 'Vue', value: 'vue' },
          { label: 'React', value: 'react' },
          { label: 'Svelte', value: 'svelte' }
        ]
      },
      {
        label: 'Backend',
        children: [
          { label: 'Node.js', value: 'node' },
          { label: 'Python', value: 'python' },
          { label: 'Go', value: 'go' }
        ]
      }
    ]
  }
]

Key Props:

  • size - Component size
  • content - Positioning/behavior config for the dropdown content
  • by - Key or comparator used to match the selected value

nuxtUIListbox ​

Listbox for single/multiple selection with filtering.

📖 Nuxt UI reference: Listbox

Schema Example:

typescript
const schema = [
  {
    $formkit: 'nuxtUIListbox',
    name: 'skills',
    label: 'Skills',
    multiple: true,
    options: ['TypeScript', 'Vue', 'Nuxt', 'FormKit', 'TailwindCSS']
  }
]

Key Props:

  • color - Component color

nuxtUIInputMenu ​

Dropdown menu with searchable options.

📖 Nuxt UI reference: InputMenu

Schema Example:

typescript
const schema = [
  {
    $formkit: 'nuxtUIInputMenu',
    name: 'framework',
    label: 'Framework',
    options: ['Nuxt', 'Next.js', 'SvelteKit', 'Remix', 'Astro'],
    placeholder: 'Search frameworks...'
  }
]

Key Props:

  • mode - 'combobox' (default) or 'autocomplete'
  • content - Positioning/behavior config for the dropdown content
  • by - Key or comparator used to match the selected value
  • open - Controlled open state of the menu

Boolean Inputs ​

nuxtUICheckbox ​

Single checkbox with label and description.

📖 Nuxt UI reference: Checkbox

Schema Example:

typescript
const schema = [
  {
    $formkit: 'nuxtUICheckbox',
    name: 'terms',
    label: 'I agree to the terms and conditions',
    description: 'You must accept to continue',
    validation: 'accepted'
  }
]

Key Props:

  • trueValue / falseValue - Custom values emitted for the checked / unchecked states

nuxtUICheckboxGroup ​

Multiple checkbox selection.

📖 Nuxt UI reference: CheckboxGroup

Schema Example:

typescript
const schema = [
  {
    $formkit: 'nuxtUICheckboxGroup',
    name: 'interests',
    label: 'Interests',
    options: [
      { label: 'Technology', value: 'tech', description: 'Software and hardware' },
      { label: 'Design', value: 'design', description: 'UI/UX and graphics' },
      { label: 'Business', value: 'business', description: 'Strategy and growth' }
    ]
  }
]

Key Props:

  • name - Shared form control name for the group

nuxtUIRadioGroup ​

Radio button group for single selection.

📖 Nuxt UI reference: RadioGroup

Schema Example:

typescript
const schema = [
  {
    $formkit: 'nuxtUIRadioGroup',
    name: 'plan',
    label: 'Select Plan',
    options: [
      { 
        label: 'Free', 
        value: 'free', 
        description: 'Basic features for getting started' 
      },
      { 
        label: 'Pro', 
        value: 'pro', 
        description: 'Advanced features for professionals' 
      },
      { 
        label: 'Enterprise', 
        value: 'enterprise', 
        description: 'Full features with dedicated support' 
      }
    ],
    validation: 'required'
  }
]

nuxtUISwitch ​

Toggle switch for boolean values.

📖 Nuxt UI reference: Switch

Schema Example:

typescript
const schema = [
  {
    $formkit: 'nuxtUISwitch',
    name: 'newsletter',
    label: 'Subscribe to newsletter',
    help: 'Get product updates and announcements'
  }
]

Key Props:

  • trueValue / falseValue - Custom values emitted for the on / off states

Specialized Inputs ​

nuxtUIInputDate ​

Date and time picker with range support.

📖 Nuxt UI reference: InputDate

Schema Example:

typescript
const schema = [
  {
    $formkit: 'nuxtUIInputDate',
    name: 'eventDate',
    label: 'Event Date',
    enableTimePicker: false,
    placeholder: 'Select date',
    validation: 'required'
  }
]

With Time:

typescript
const schema = [
  {
    $formkit: 'nuxtUIInputDate',
    name: 'appointment',
    label: 'Appointment',
    enableTimePicker: true,
    placeholder: 'Select date and time'
  }
]

nuxtUIInputTime ​

Time picker with 12/24-hour format.

📖 Nuxt UI reference: InputTime

Schema Example:

typescript
const schema = [
  {
    $formkit: 'nuxtUIInputTime',
    name: 'meetingTime',
    label: 'Meeting Time',
    placeholder: 'Select time'
  }
]

nuxtUIColorPicker ​

Color selection with multiple format support (hex, rgb, hsl).

📖 Nuxt UI reference: ColorPicker

Schema Example:

typescript
const schema = [
  {
    $formkit: 'nuxtUIColorPicker',
    name: 'themeColor',
    label: 'Theme Color',
    mode: 'hex'
  }
]

nuxtUIInputTags ​

Tag input component with a custom delimiter.

📖 Nuxt UI reference: InputTags

Schema Example:

typescript
const schema = [
  {
    $formkit: 'nuxtUIInputTags',
    name: 'tags',
    label: 'Tags',
    placeholder: 'Add tags...',
    delimiter: ',',
    help: 'Press comma to add a tag'
  }
]

Key Props:

  • delimiter - Character or RegExp used to split tags (e.g. ',')

nuxtUIPinInput ​

PIN/OTP entry component.

📖 Nuxt UI reference: PinInput

Schema Example:

typescript
const schema = [
  {
    $formkit: 'nuxtUIPinInput',
    name: 'pin',
    label: 'Enter PIN',
    length: 6,
    type: 'number',
    validation: 'required|length:6'
  }
]

Key Props:

  • type - 'text' (default) or 'number'
  • separator - Insert a separator between inputs (index or list of indexes)

nuxtUISlider ​

Range slider for numeric values.

📖 Nuxt UI reference: Slider

Schema Example:

typescript
const schema = [
  {
    $formkit: 'nuxtUISlider',
    name: 'volume',
    label: 'Volume',
    min: 0,
    max: 100,
    step: 1
  }
]

Complete Form Example ​

Here's a comprehensive example using multiple input types:

vue
<template>
  <FUDataEdit
    :data="profileData"
    :schema="profileSchema"
    @data-saved="saveProfile"
  />
</template>

<script setup lang="ts">
const profileData = ref({
  name: '',
  email: '',
  phone: '',
  bio: '',
  age: 25,
  country: '',
  role: '',
  skills: [],
  plan: 'free',
  notifications: true,
  newsletter: false
})

const profileSchema = [
  {
    $el: 'h3',
    children: 'Personal Information',
    attrs: { class: 'text-xl font-bold mb-4' }
  },
  {
    $formkit: 'nuxtUIInput',
    name: 'name',
    label: 'Full Name',
    validation: 'required'
  },
  {
    $formkit: 'nuxtUIInput',
    name: 'email',
    inputType: 'email',
    label: 'Email',
    validation: 'required|email'
  },
  {
    $formkit: 'nuxtUIInput',
    name: 'phone',
    inputType: 'tel',
    label: 'Phone'
  },
  {
    $formkit: 'nuxtUITextarea',
    name: 'bio',
    label: 'Bio',
    rows: 3
  },
  {
    $el: 'h3',
    children: 'Additional Details',
    attrs: { class: 'text-xl font-bold mt-6 mb-4' }
  },
  {
    $formkit: 'nuxtUIInputNumber',
    name: 'age',
    label: 'Age',
    min: 13,
    max: 120
  },
  {
    $formkit: 'nuxtUISelect',
    name: 'country',
    label: 'Country',
    options: ['USA', 'UK', 'Canada', 'Australia']
  },
  {
    $formkit: 'nuxtUISelectMenu',
    name: 'skills',
    label: 'Skills',
    multiple: true,
    options: ['Vue', 'Nuxt', 'TypeScript', 'FormKit']
  },
  {
    $formkit: 'nuxtUIRadioGroup',
    name: 'plan',
    label: 'Plan',
    options: [
      { label: 'Free', value: 'free' },
      { label: 'Pro', value: 'pro' }
    ]
  },
  {
    $el: 'h3',
    children: 'Preferences',
    attrs: { class: 'text-xl font-bold mt-6 mb-4' }
  },
  {
    $formkit: 'nuxtUISwitch',
    name: 'notifications',
    label: 'Enable notifications'
  },
  {
    $formkit: 'nuxtUICheckbox',
    name: 'newsletter',
    label: 'Subscribe to newsletter'
  }
]

const saveProfile = async (data: any) => {
  await $fetch('/api/profile', { method: 'PUT', body: data })
}
</script>

Template Usage (Alternative) ​

While schemas are recommended, template-based usage is also supported:

vue
<FormKit
  type="nuxtUIInput"
  name="email"
  label="Email"
  input-type="email"
  validation="required|email"
/>

Recommendation

Use schemas for better maintainability and type safety. Use templates only for simple forms or when you need fine-grained layout control.

Common Props ​

All input components support:

  • name (required) - Field name for form data
  • label - Field label text
  • help - Help text below field
  • placeholder - Placeholder text
  • validation - Validation rules
  • disabled - Disable the input
  • size - Component size

Next Steps ​

👁️ Output Components ​

Display-only components with schemas
View Output Components →

🔄 Repeater ​

Dynamic repeatable sections in schemas
Learn About Repeaters →

💡 Examples ​

Real-world schema-based forms
Browse Examples →

Released under the MIT License.

Copyright © 2024-present sfxcode