Form Component

Overview

The Form component provides a complete form management system with validation, field handling, and form state management. It's built on top of React Hook Form and provides a consistent way to handle form data across your application.

Basic Usage

import { 
  Form, 
  FormControl, 
  FormField, 
  FormItem, 
  FormLabel, 
  FormMessage 
} from '@dashflowx/core'

export default function FormExample() {
  return (
    <Form>
      <FormField name="name">
        <FormItem>
          <FormLabel>Name</FormLabel>
          <FormControl>
            <input type="text" placeholder="Enter your name" />
          </FormControl>
          <FormMessage />
        </FormItem>
      </FormField>
    </Form>
  )
}

Preview:

Components

Form

The main form wrapper component that provides form context and validation.

FormField

Wraps individual form fields and connects them to the form state.

FormItem

Container for form field elements with proper spacing and layout.

FormLabel

Styled label component for form fields.

FormControl

Wrapper for form input elements.

FormMessage

Displays validation messages for form fields.

FormDescription

Provides additional context or help text for form fields.

Props

Component	Prop	Type	Default	Description
`Form`	`className`	`string`	`''`	Additional CSS classes
`FormField`	`name`	`string`	-	Field name for form state
`FormItem`	`className`	`string`	`''`	Additional CSS classes
`FormLabel`	`className`	`string`	`''`	Additional CSS classes
`FormControl`	`className`	`string`	`''`	Additional CSS classes
`FormMessage`	`className`	`string`	`''`	Additional CSS classes
`FormDescription`	`className`	`string`	`''`	Additional CSS classes

Examples

Basic Contact Form

import { 
  Form, 
  FormControl, 
  FormField, 
  FormItem, 
  FormLabel, 
  FormMessage,
  FormDescription 
} from '@dashflowx/core'

export default function ContactForm() {
  return (
    <Form>
      <FormField name="name">
        <FormItem>
          <FormLabel>Full Name</FormLabel>
          <FormControl>
            <input type="text" placeholder="Enter your full name" />
          </FormControl>
          <FormDescription>
            This is your public display name.
          </FormDescription>
          <FormMessage />
        </FormItem>
      </FormField>
      
      <FormField name="email">
        <FormItem>
          <FormLabel>Email</FormLabel>
          <FormControl>
            <input type="email" placeholder="Enter your email" />
          </FormControl>
          <FormMessage />
        </FormItem>
      </FormField>
      
      <FormField name="message">
        <FormItem>
          <FormLabel>Message</FormLabel>
          <FormControl>
            <textarea placeholder="Enter your message" rows={4} />
          </FormControl>
          <FormMessage />
        </FormItem>
      </FormField>
    </Form>
  )
}

Preview:

Registration Form

import { 
  Form, 
  FormControl, 
  FormField, 
  FormItem, 
  FormLabel, 
  FormMessage 
} from '@dashflowx/core'

export default function RegistrationForm() {
  return (
    <Form>
      <FormField name="firstName">
        <FormItem>
          <FormLabel>First Name</FormLabel>
          <FormControl>
            <input type="text" placeholder="Enter your first name" />
          </FormControl>
          <FormMessage />
        </FormItem>
      </FormField>
      
      <FormField name="lastName">
        <FormItem>
          <FormLabel>Last Name</FormLabel>
          <FormControl>
            <input type="text" placeholder="Enter your last name" />
          </FormControl>
          <FormMessage />
        </FormItem>
      </FormField>
      
      <FormField name="email">
        <FormItem>
          <FormLabel>Email Address</FormLabel>
          <FormControl>
            <input type="email" placeholder="Enter your email" />
          </FormControl>
          <FormMessage />
        </FormItem>
      </FormField>
      
      <FormField name="password">
        <FormItem>
          <FormLabel>Password</FormLabel>
          <FormControl>
            <input type="password" placeholder="Enter your password" />
          </FormControl>
          <FormMessage />
        </FormItem>
      </FormField>
      
      <FormField name="confirmPassword">
        <FormItem>
          <FormLabel>Confirm Password</FormLabel>
          <FormControl>
            <input type="password" placeholder="Confirm your password" />
          </FormControl>
          <FormMessage />
        </FormItem>
      </FormField>
    </Form>
  )
}

Preview:

Settings Form

import { 
  Form, 
  FormControl, 
  FormField, 
  FormItem, 
  FormLabel, 
  FormMessage,
  FormDescription 
} from '@dashflowx/core'

export default function SettingsForm() {
  return (
    <Form>
      <FormField name="username">
        <FormItem>
          <FormLabel>Username</FormLabel>
          <FormControl>
            <input type="text" placeholder="Enter your username" />
          </FormControl>
          <FormDescription>
            This is your public username. It can be your real name or a pseudonym.
          </FormDescription>
          <FormMessage />
        </FormItem>
      </FormField>
      
      <FormField name="bio">
        <FormItem>
          <FormLabel>Bio</FormLabel>
          <FormControl>
            <textarea placeholder="Tell us about yourself" rows={3} />
          </FormControl>
          <FormDescription>
            You can write a few sentences about yourself.
          </FormDescription>
          <FormMessage />
        </FormItem>
      </FormField>
      
      <FormField name="website">
        <FormItem>
          <FormLabel>Website</FormLabel>
          <FormControl>
            <input type="url" placeholder="https://example.com" />
          </FormControl>
          <FormDescription>
            Your personal or professional website.
          </FormDescription>
          <FormMessage />
        </FormItem>
      </FormField>
    </Form>
  )
}

Preview:

Survey Form

import { 
  Form, 
  FormControl, 
  FormField, 
  FormItem, 
  FormLabel, 
  FormMessage 
} from '@dashflowx/core'

export default function SurveyForm() {
  return (
    <Form>
      <FormField name="satisfaction">
        <FormItem>
          <FormLabel>How satisfied are you with our service?</FormLabel>
          <FormControl>
            <select>
              <option value="">Select an option</option>
              <option value="very-satisfied">Very Satisfied</option>
              <option value="satisfied">Satisfied</option>
              <option value="neutral">Neutral</option>
              <option value="dissatisfied">Dissatisfied</option>
              <option value="very-dissatisfied">Very Dissatisfied</option>
            </select>
          </FormControl>
          <FormMessage />
        </FormItem>
      </FormField>
      
      <FormField name="recommendation">
        <FormItem>
          <FormLabel>Would you recommend us to others?</FormLabel>
          <FormControl>
            <div className="space-y-2">
              <label className="flex items-center">
                <input type="radio" name="recommendation" value="yes" />
                <span className="ml-2">Yes</span>
              </label>
              <label className="flex items-center">
                <input type="radio" name="recommendation" value="no" />
                <span className="ml-2">No</span>
              </label>
            </div>
          </FormControl>
          <FormMessage />
        </FormItem>
      </FormField>
      
      <FormField name="feedback">
        <FormItem>
          <FormLabel>Additional Feedback</FormLabel>
          <FormControl>
            <textarea placeholder="Share your thoughts..." rows={4} />
          </FormControl>
          <FormMessage />
        </FormItem>
      </FormField>
    </Form>
  )
}

Preview:

Common Use Cases

User Profile Form

const profileForm = (
  <Form>
    <FormField name="avatar">
      <FormItem>
        <FormLabel>Profile Picture</FormLabel>
        <FormControl>
          <input type="file" accept="image/*" />
        </FormControl>
        <FormMessage />
      </FormItem>
    </FormField>
    
    <FormField name="displayName">
      <FormItem>
        <FormLabel>Display Name</FormLabel>
        <FormControl>
          <input type="text" placeholder="Enter display name" />
        </FormControl>
        <FormMessage />
      </FormItem>
    </FormField>
    
    <FormField name="bio">
      <FormItem>
        <FormLabel>Bio</FormLabel>
        <FormControl>
          <textarea placeholder="Tell us about yourself" rows={3} />
        </FormControl>
        <FormMessage />
      </FormItem>
    </FormField>
  </Form>
);

Product Review Form

const reviewForm = (
  <Form>
    <FormField name="rating">
      <FormItem>
        <FormLabel>Rating</FormLabel>
        <FormControl>
          <div className="flex space-x-1">
            {[1, 2, 3, 4, 5].map((star) => (
              <button key={star} type="button" className="text-2xl">
                ⭐
              </button>
            ))}
          </div>
        </FormControl>
        <FormMessage />
      </FormItem>
    </FormField>
    
    <FormField name="title">
      <FormItem>
        <FormLabel>Review Title</FormLabel>
        <FormControl>
          <input type="text" placeholder="Summarize your review" />
        </FormControl>
        <FormMessage />
      </FormItem>
    </FormField>
    
    <FormField name="review">
      <FormItem>
        <FormLabel>Your Review</FormLabel>
        <FormControl>
          <textarea placeholder="Share your experience..." rows={5} />
        </FormControl>
        <FormMessage />
      </FormItem>
    </FormField>
  </Form>
);

const newsletterForm = (
  <Form>
    <FormField name="email">
      <FormItem>
        <FormLabel>Email Address</FormLabel>
        <FormControl>
          <input type="email" placeholder="Enter your email" />
        </FormControl>
        <FormDescription>
          We'll send you updates about new features and content.
        </FormDescription>
        <FormMessage />
      </FormItem>
    </FormField>
    
    <FormField name="interests">
      <FormItem>
        <FormLabel>Interests</FormLabel>
        <FormControl>
          <div className="space-y-2">
            <label className="flex items-center">
              <input type="checkbox" value="technology" />
              <span className="ml-2">Technology</span>
            </label>
            <label className="flex items-center">
              <input type="checkbox" value="design" />
              <span className="ml-2">Design</span>
            </label>
            <label className="flex items-center">
              <input type="checkbox" value="business" />
              <span className="ml-2">Business</span>
            </label>
          </div>
        </FormControl>
        <FormMessage />
      </FormItem>
    </FormField>
  </Form>
);

Best Practices

1. Proper Field Naming

Use descriptive and consistent field names.

// ✅ Good - Descriptive names
<FormField name="userEmail">
<FormField name="userPassword">
<FormField name="userConfirmPassword">

// ❌ Avoid - Unclear names
<FormField name="email">
<FormField name="pass">
<FormField name="pass2">

2. Consistent Validation

Apply consistent validation rules across your forms.

// ✅ Good - Consistent validation
<FormField name="email" rules={{ required: true, type: 'email' }}>
<FormField name="password" rules={{ required: true, minLength: 8 }}>

3. Clear Labels and Descriptions

Provide clear labels and helpful descriptions.

// ✅ Good - Clear labels and descriptions
<FormLabel>Email Address</FormLabel>
<FormDescription>
  We'll use this to send you important updates.
</FormDescription>

// ❌ Avoid - Unclear labels
<FormLabel>Email</FormLabel>

4. Proper Error Handling

Display validation errors clearly.

// ✅ Good - Clear error messages
<FormMessage />
// This will display validation errors automatically

// ❌ Avoid - Custom error handling without FormMessage
<div className="text-red-500">{errors.email?.message}</div>

5. Accessible Forms

Ensure your forms are accessible to all users.

// ✅ Good - Accessible form
<FormField name="email">
  <FormItem>
    <FormLabel htmlFor="email-input">Email</FormLabel>
    <FormControl>
      <input id="email-input" type="email" />
    </FormControl>
    <FormMessage />
  </FormItem>
</FormField>

Customization

Custom Styling

You can customize the form appearance using CSS classes:

<Form className="max-w-md mx-auto">
  <FormField name="email">
    <FormItem className="mb-4">
      <FormLabel className="text-lg font-semibold">Email</FormLabel>
      <FormControl>
        <input className="w-full px-4 py-2 border rounded-lg" />
      </FormControl>
      <FormMessage className="text-red-500 text-sm" />
    </FormItem>
  </FormField>
</Form>

Different Themes

Use different themes for different contexts:

// Light theme
<Form className="bg-white border border-gray-200 rounded-lg p-6">

// Dark theme
<Form className="bg-gray-900 border border-gray-700 rounded-lg p-6 text-white">

Size Variations

Use different sizes for different emphasis levels:

// Compact form
<Form className="space-y-3">
  <FormItem className="space-y-1">
    <FormLabel className="text-sm">Email</FormLabel>
    <FormControl>
      <input className="h-8 px-2 text-sm" />
    </FormControl>
  </FormItem>
</Form>

// Large form
<Form className="space-y-8">
  <FormItem className="space-y-4">
    <FormLabel className="text-xl">Email</FormLabel>
    <FormControl>
      <input className="h-12 px-4 text-lg" />
    </FormControl>
  </FormItem>
</Form>

Advanced Usage

Form Validation

Implement custom validation rules:

const validationSchema = {
  email: {
    required: 'Email is required',
    pattern: {
      value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
      message: 'Invalid email address'
    }
  },
  password: {
    required: 'Password is required',
    minLength: {
      value: 8,
      message: 'Password must be at least 8 characters'
    }
  }
};

Dynamic Forms

Create forms that change based on user input:

const [formType, setFormType] = useState('basic');

const renderFormFields = () => {
  switch (formType) {
    case 'basic':
      return <BasicFormFields />;
    case 'advanced':
      return <AdvancedFormFields />;
    default:
      return <BasicFormFields />;
  }
};

Form State Management

Handle form state and submission:

const handleSubmit = (data) => {
  console.log('Form data:', data);
  // Process form data
};

const handleError = (errors) => {
  console.log('Form errors:', errors);
  // Handle validation errors
};

Input: For text input fields
TextArea: For multi-line text input
Select: For dropdown selections
Checkbox: For checkbox inputs
RadioGroup: For radio button groups
Button: For form submission buttons

API Reference

For the complete API reference and advanced usage patterns, see the Form API documentation.

Overview

Basic Usage

Components

Form

FormField

FormItem

FormLabel

FormControl

FormMessage

FormDescription

Props

Examples

Basic Contact Form

Registration Form

Settings Form

Survey Form

Common Use Cases

User Profile Form

Product Review Form

Newsletter Signup Form

Best Practices

1. Proper Field Naming

2. Consistent Validation

3. Clear Labels and Descriptions

4. Proper Error Handling

5. Accessible Forms

Customization

Custom Styling

Different Themes

Size Variations

Advanced Usage

Form Validation

Dynamic Forms

Form State Management

Related Components

API Reference