Distributes server-side validation errors to its Field components.
import { Form } from "@/fragments/ui";Source<Form onSubmit={(e) => { e.preventDefault(); }}>
<Grid columns={2} gap="md">
<Field name="firstName">
<Field.Label>First Name</Field.Label>
<Field.Control>
<Input placeholder="Jane" />npx @usefragments/cli add formWrites src/fragments/ui/components/Form plus what it imports, the globals stylesheet, and .fragments/registry-lock.json, then prints the packages to add. No account, no key.
Your own registry: publish from Fragments Cloud and add --registry org/name. Connect a workspace.
Form is a compound: import the root and reach its parts through dot notation.
Form.ActionsPaired name fields, then full-width rows and a right-aligned submit.
<Form onSubmit={(e) => { e.preventDefault(); }}>
<Grid columns={2} gap="md">
<Field name="firstName">
<Field.Label>First Name</Field.Label>
<Field.Control>
<Input placeholder="Jane" />
</Field.Control>
</Field>
<Field name="lastName">
<Field.Label>Last Name</Field.Label>
<Field.Control>
<Input placeholder="Doe" />
</Field.Control>
</Field>
<Grid.Item colSpan="full">
<Field name="email">
<Field.Label>Email</Field.Label>
<Field.Control>Fieldsets split a long form into sections the user can scan.
<Form onSubmit={(e) => { e.preventDefault(); }}>
<Fieldset>
<Fieldset.Legend>Profile</Fieldset.Legend>
<Grid columns={2} gap="md">
<Field name="displayName">
<Field.Label>Display Name</Field.Label>Mixed control types in one submission flow.
<Form onSubmit={(e) => { e.preventDefault(); }}>
<Grid columns={2} gap="md">
<Field name="name">
<Field.Label>Name</Field.Label>
<Field.Control>
<Input placeholder="Your name" />Errors from the server land on the fields that caused them.
<Form errors={{ username: 'Username is already taken', email: 'Email is already registered' }}>
<Grid columns={2} gap="md">
<Field name="username">
<Field.Label>Username</Field.Label>
<Field.Control>
<Input defaultValue="janedoe" />Prop | Type | Default | Description |
|---|---|---|---|
childrenRequired | node | Not set | Form content |
errors | object | Not set | Server-side errors keyed by field name |
onSubmit | function | Not set | Form submission handler (preferred) |
onFormSubmit | function | Not set | Deprecated alias for onSubmit |
onClearErrors | function | Not set | Called with field name when errors should be cleared |
validationMode | enumonSubmitonBluronChange | Not set | When field validation should run |