Forms

Form

Validation on submit, focus on the first problem, and server errors shown on their fields.

Ant Design: Form

import { Form, FormActions, ErrorSummary } from '@alea/ui';

Examples

Try taken@example.com: the server answer appears on the field.

For long forms: what to fix, with links to the fields.

Fix these to continue

Show 8 React Aria props

A form that validates on submit, moves focus to the first problem, and shows server errors on their fields.

Prop	Type	Default	Description
`children`required	`ReactNode`	-	The children of the component.
`gap`	`number`	`20`	Space between fields. Default 20 px.
`onSubmit`	`((values: Record<string, FormDataEntryValue>, event: FormEvent<HTMLFormElement>) => void \| Record<string, string \| string[]> \| Promise<...>)`	-	Called with the form values when every field is valid. Return server errors by field name to show them on the fields; a promise shows the loading state.

The buttons at the end of a form.

Prop	Type	Default	Description
`align`	`"start" \| "end" \| "stretch"`	`'start'`	start (default), end, or stretch for full-width buttons.
`isLoading`	`boolean`	-	Shows the spinner on the submit button.
`secondary`	`ReactNode`	-	A cancel or secondary button.
`submitLabel`	`ReactNode`	`'Save'`	The submit button text. Default "Save".

Prop	Type	Default	Description
`errors`required	`Record<string, string>`	-	The errors by field id: { email: 'Use a valid email.' }. Each links to its field.
`title`	`ReactNode`	`'Fix these to continue'`	The heading. Default "Fix these to continue".

Key	Does
`Enter (in a field)`	Submits
`Tab`	Moves between fields and the summary links

Don't