N/A

FormField

Wrap form controls with labels, descriptions, help text, and validation errors.

Required

This appears in your workspace switcher.

Use lowercase letters, numbers, and dashes only.

Installation

pnpm dlx shadcn-vue@latest add field input
pnpm dlx shadcn-vue@latest add "https://ui.stackhacker.io/r/form-field.json"

Usage

<script setup lang="ts">
import { FormField } from '@/components/form-field'
import { Input } from '@/components/ui/input'
</script>

<template>
  <FormField
    v-slot="field"
    label="Email"
    description="Use your work email."
    error="Enter a valid email address."
  >
    <Input v-bind="field" type="email" />
  </FormField>
</template>

With Form

When used inside Form, the name prop matches the current form errors.

<Form :state="state" :validate="validate">
  <FormField v-slot="field" label="Email" name="email">
    <Input v-model="state.email" v-bind="field" />
  </FormField>
</Form>

Slot Props

FormField passes accessibility props to the default slot so the slotted control can receive a stable id, invalid state, and description/error references.

PropDescription
idGenerated control id.
nameField name.
disabledWhether the parent form is disabled.
aria-invalidARIA invalid state for the control.
aria-describedbyDescription, help, or error ids for the control.

API Reference

Props

PropTypeDefaultDescription
namestringField name used to match form errors.
errorPatternRegExpOptional pattern for matching related error names.
labelstringField label.
descriptionstringSupporting copy below the label.
helpstringHelp text shown when no error is present.
hintstringText shown next to the label.
errorstring | booleanExplicit error. Overrides form context errors.
requiredbooleanfalseShows a required marker.
orientation'vertical' | 'horizontal' | 'responsive''vertical'Field layout orientation.
classstringAdditional CSS classes.

Slots

SlotDescription
defaultForm control. Receives accessibility slot props.
labelCustom label content.
descriptionCustom description content.
helpCustom help content.
hintCustom hint content.
errorCustom error content.