Form Field

Ready

A wrapper component that provides consistent label, description, and error handling for form inputs

Basic Usage

FormField wraps any input component with label and description

Enter your first and last name

Tell us a bit about yourself

Required Fields

Mark fields as required with a visual indicator

Minimum 8 characters

Error State

Display validation errors below the input

Type an invalid email above to see the error state.

Disabled State

Disable the entire field including label styling

Contact support to change

With Other Components

FormField works with any form component

Form Field Hint

Add contextual help with the FormFieldHint component

You can find your API key in the dashboard under Settings → API.

Form Field Group

Group related fields with a shared legend

Contact Information

How can we reach you?

Usage

Basic implementation examples

import { FormField, FormFieldHint, FormFieldGroup } from '@/components/ui/form-field'
import { Input } from '@/components/ui/input'

// Basic usage
<FormField label="Email" description="We'll never share your email">
  <Input type="email" placeholder="Enter email" />
</FormField>

// With validation error
<FormField
  label="Password"
  required
  error={errors.password}
>
  <Input type="password" />
</FormField>

// With hint
<FormField label="API Key">
  <Input type="password" />
</FormField>
<FormFieldHint>Find your API key in Settings.</FormFieldHint>

// Grouped fields
<FormFieldGroup legend="Address" description="Your shipping address">
  <FormField label="Street">
    <Input placeholder="123 Main St" />
  </FormField>
  <FormField label="City">
    <Input placeholder="New York" />
  </FormField>
</FormFieldGroup>

API Reference

FormField component props

PropTypeDefaultDescription
labelstring-Label text
descriptionstring-Helper text below label
errorstring-Error message
requiredbooleanfalseShow required indicator
disabledbooleanfalseDisable field and input
childrenReactNode-Input component

Features

Built-in functionality

  • Automatic ID linking - Label automatically linked to input
  • Error handling - Error message with icon and ARIA support
  • Required indicator - Visual asterisk for required fields
  • Disabled state - Propagates disabled to child input
  • Accessibility - aria-invalid, aria-describedby support
  • FormFieldGroup - Group related fields with fieldset/legend
  • FormFieldHint - Contextual help with icon