Form

Installation

Install the Form component using the nocta-ui CLI:

npx nocta-ui add form

Then import the component:

import { 
  Form, 
  FormField, 
  FormLabel, 
  FormControl, 
  FormDescription, 
  FormMessage, 
  FormActions 
} from '@/components/ui/form';

Basic Usage

The Form component follows a composable architecture where you build forms by combining smaller components together.

Form Architecture

The Form component is built with a composable architecture:

• Form: The main form container
• FormField: Wraps individual form fields and provides context
• FormLabel: Accessible labels with required field indicators
• FormControl: Wrapper that connects inputs to the field context
• FormDescription: Helper text for additional guidance
• FormMessage: Error, success, and warning messages
• FormActions: Container for form action buttons

Error Handling

Handle form validation errors by passing an error prop to FormField. The error message will automatically be displayed using FormMessage.

Complex Forms

Build complex forms with multiple field types, layouts, and validation.

Form Actions

The FormActions component supports different alignments for form buttons.

Message Types

Form messages support different types for various validation states.

Accessibility Features

The Form component is built with accessibility in mind:

• Semantic HTML: Uses proper form elements and ARIA attributes
• Label Association: Labels are automatically associated with their inputs
• Error Announcements: Error messages are announced to screen readers
• Required Field Indicators: Visual and accessible indicators for required fields
• Focus Management: Proper focus order and visual focus indicators
• Descriptive Content: Helper text is properly associated with form controls

Customization

Custom Styling

All form components accept a className prop for custom styling:

<Form className="max-w-2xl mx-auto">
  <FormField name="custom" className="mb-8">
    <FormLabel className="text-lg font-bold">Custom Label</FormLabel>
    <FormControl className="mt-3">
      <Input className="border-2 border-blue-500" />
    </FormControl>
    <FormDescription className="text-blue-600">
      Custom helper text styling
    </FormDescription>
  </FormField>
</Form>

Integration with Form Libraries

The Form component works well with form libraries like React Hook Form:

import { useForm, Controller } from 'react-hook-form';

function MyForm() {
  const { control, handleSubmit, formState: { errors } } = useForm();

  return (
    <Form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name="email"
        control={control}
        rules={{ required: 'Email is required' }}
        render={({ field }) => (
          <FormField name="email" error={errors.email?.message}>
            <FormLabel required>Email</FormLabel>
            <FormControl>
              <Input {...field} />
            </FormControl>
            <FormMessage />
          </FormField>
        )}
      />
      
      <FormActions>
        <Button type="submit">Submit</Button>
      </FormActions>
    </Form>
  );
}

Props

Form

FormField

FormLabel

FormMessage

FormActions

The Form components also accept all standard HTML attributes for their respective elements.