Form.mdā¢2.86 kB
---
name: Form
category: forms
description: A form wrapper component with built-in validation and submission handling
importPath: '@your-library/Form'
status: stable
version: 1.5.0
---
# Form Component
The Form component provides a consistent way to handle form validation, submission, and error states across your application.
## Usage
```tsx
import { Form } from '@your-library/Form';
import { TextBox } from '@your-library/TextBox';
import { Button } from '@your-library/Button';
function LoginForm() {
const handleSubmit = async (values) => {
// Handle form submission
console.log('Form values:', values);
};
return (
<Form onSubmit={handleSubmit}>
<TextBox
name="email"
label="Email"
type="email"
required
validation="email"
/>
<TextBox
name="password"
label="Password"
type="password"
required
minLength={8}
/>
<Button type="submit">Login</Button>
</Form>
);
}
```
## Props
| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| onSubmit | `(values: FormData) => void \| Promise<void>` | Yes | - | Form submission handler |
| initialValues | `Record<string, any>` | No | {} | Initial form values |
| validation | `ValidationSchema` | No | - | Custom validation schema |
| className | `string` | No | - | Additional CSS classes |
| disabled | `boolean` | No | false | Disable all form inputs |
| resetOnSubmit | `boolean` | No | false | Reset form after successful submission |
## Validation
The Form component supports several validation methods:
### Built-in HTML5 Validation
```tsx
<Form>
<TextBox name="email" type="email" required />
<TextBox name="age" type="number" min={18} max={100} />
</Form>
```
### Custom Validation Schema
```tsx
const validationSchema = {
email: {
required: true,
pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
message: 'Please enter a valid email'
},
password: {
required: true,
minLength: 8,
validate: (value) => {
if (!/[A-Z]/.test(value)) {
return 'Password must contain at least one uppercase letter';
}
return true;
}
}
};
<Form validation={validationSchema}>
{/* form fields */}
</Form>
```
## Form State Management
Access form state using the `useFormContext` hook:
```tsx
import { useFormContext } from '@your-library/Form';
function SubmitButton() {
const { isSubmitting, isValid, errors } = useFormContext();
return (
<Button
type="submit"
disabled={isSubmitting || !isValid}
>
{isSubmitting ? 'Submitting...' : 'Submit'}
</Button>
);
}
```
## Error Handling
```tsx
<Form
onSubmit={handleSubmit}
onError={(errors) => {
console.error('Form errors:', errors);
}}
>
{/* form content */}
</Form>
```