FormField

A compound form field component with Label, Error, and Hint subcomponents for consistent form layouts.

Preview

Username*

This will be your public display name.

Please enter a valid email address.

Installation

npx shadcn@latest add @shadszn/form-field

Usage

import { FormField } from "@/components/ui/form-field"
import { Input } from "@/components/ui/input"

export default function Example() {
  return (
    <FormField>
      <FormField.Label htmlFor="email" required>
        Email Address
      </FormField.Label>
      <Input id="email" type="email" placeholder="you@example.com" />
      <FormField.Hint>We will never share your email.</FormField.Hint>
    </FormField>
  )
}

With Error

<FormField>
  <FormField.Label htmlFor="password" required>
    Password
  </FormField.Label>
  <Input id="password" type="password" error />
  <FormField.Error message="Password must be at least 8 characters." />
</FormField>

Subcomponents

FormField

Prop	Type	Default	Description
children*	ReactNode	---	Form field contents (label, input, error, hint).
className	string	---	Additional CSS classes.

FormField.Label

Prop	Type	Default	Description
required	boolean	false	Shows a red asterisk after the label text.
htmlFor	string	---	Associates the label with an input by id.

FormField.Error

Prop	Type	Default	Description
message	string	---	Error message to display. Renders nothing when undefined.

FormField.Hint

Prop	Type	Default	Description
children*	ReactNode	---	Hint text content.