The Form component provides a semantic form container with built-in validation support.
Installation
import { Form } from "@craftdotui/baseui/components/form";
<Form onSubmit={(e) => {
e.preventDefault();
// Handle form submission
}}>
<Field>
<FieldLabel>Name</FieldLabel>
<FieldControl name="name" />
</Field>
<Button type="submit">Submit</Button>
</Form>
Form-level validation function.
Error messages by field name.
Examples
Basic Form
<Form onSubmit={handleSubmit}>
<Field>
<FieldLabel>Email</FieldLabel>
<FieldControl type="email" name="email" />
</Field>
<Field>
<FieldLabel>Password</FieldLabel>
<FieldControl type="password" name="password" />
</Field>
<Button type="submit">Sign In</Button>
</Form>
With Validation
const handleSubmit = (event: React.FormEvent) => {
event.preventDefault();
const formData = new FormData(event.currentTarget);
// Process form data
};
<Form onSubmit={handleSubmit}>
<Field validate={(value) => !value && 'Required'}>
<FieldLabel>Username</FieldLabel>
<FieldControl name="username" />
<FieldError />
</Field>
<Button type="submit">Submit</Button>
</Form>
Accessibility
- Built on @base-ui/react Form primitive
- Semantic HTML form element
- Validation error announcements
- Keyboard submission (Enter key)