The Form component in Crafted UI is a thin wrapper around the Base UI Form component, providing a seamless integration with the rest of your application. It handles form submissions, validation, and error handling with a clean, accessible interface.

Form is designed to work together with the Field, FieldLabel, FieldError, and Input components to create complete form experiences.

Basic Form

import { Form, Field, FieldLabel, Input, Button } from "@crafted-ui/react";

<Form onSubmit={(event) => {
  event.preventDefault();
  // Handle form submission
}}>
  <Field>
    <FieldLabel>Username</FieldLabel>
    <Input name="username" required />
  </Field>
  
  <Field>
    <FieldLabel>Password</FieldLabel>
    <Input type="password" name="password" required />
  </Field>
  
  <Button type="submit">Sign In</Button>
</Form>

Form with Modern Fieldset

Use the enhanced Fieldset component with title, subtitle, and grid layout:

import { Form, Fieldset, FieldsetButtons } from "@crafted-ui/react";
import { Field, Input, Button } from "@crafted-ui/react";

<Form onSubmit={handleSubmit}>
  <Fieldset title="Personal Information" subtitle="Tell us about yourself" grid>
    <Field label="First Name" className="col-span-6">
      <Input name="firstName" required />
    </Field>
    
    <Field label="Last Name" className="col-span-6">
      <Input name="lastName" required />
    </Field>
    
    <Field label="Email">
      <Input name="email" type="email" required />
    </Field>
    
    <FieldsetButtons>
      <Button outline>Cancel</Button>
      <Button clr="primary" type="submit">Save</Button>
    </FieldsetButtons>
  </Fieldset>
</Form>

The enhanced Fieldset component supports grid layouts for more complex forms. Use the grid prop to enable a 12-column grid system:

<Fieldset title="Address Information" grid>
  <Field label="Street Address">
    <Input name="street" />
  </Field>
  
  <Field label="City" className="col-span-6">
    <Input name="city" />
  </Field>
  
  <Field label="State" className="col-span-3">
    <Input name="state" />
  </Field>
  
  <Field label="ZIP" className="col-span-3">
    <Input name="zip" />
  </Field>
  
  <FieldsetButtons>
    <Button clr="primary">Save Address</Button>
  </FieldsetButtons>
</Fieldset>

Common Grid Patterns

• col-span-6: Half width (2 fields per row)
• col-span-4: One third width (3 fields per row)
• col-span-3: One quarter width (4 fields per row)
• col-span-full: Full width (default)

Use the FieldsetButtons component to create consistent button layouts within fieldsets:

// Right-aligned (default)
<FieldsetButtons>
  <Button outline>Cancel</Button>
  <Button clr="primary">Save</Button>
</FieldsetButtons>

// Left-aligned for destructive actions
<FieldsetButtons align="left">
  <Button clr="destructive">Delete</Button>
</FieldsetButtons>

// Center-aligned for single actions
<FieldsetButtons align="center">
  <Button clr="primary">Continue</Button>
</FieldsetButtons>

The Form component accepts all standard HTML form attributes and props from the @base-ui-components/react Form component, plus:

Prop	Type	Description
className	string	Additional CSS class names to apply to the form
children	ReactNode	The content of the form
onSubmit	(event: React.FormEvent) => void	Form submission handler function
ref	React.Ref	Reference to the underlying form element

The Form component follows best practices for accessibility:

• Uses semantic HTML form elements
• Supports keyboard navigation
• Form elements can be properly labeled
• Works with screen readers
• Error messages are properly associated with form inputs

When implementing forms:

1. Always use labels for form inputs
2. Provide clear error messages when validation fails
3. Use aria attributes when necessary for complex form interfaces
4. Ensure error states are communicated both visually and to assistive technology

• Use Fieldset components with descriptive titles to group related form fields
• Leverage the grid layout for complex forms with multiple columns
• Use FieldsetButtons for consistent action button placement and alignment
• Use meaningful validation messages for form errors
• Include clear submission feedback
• Use appropriate input types (email, tel, number, etc.)
• Consider using controlled components for complex forms
• Leverage form libraries like React Hook Form or Formik for complex validation scenarios
• Use Field with label prop for simplified field creation
• Maintain logical tab order, especially in grid layouts