Forms

Form behaviour on the Core Field parts: validation with accessible errors, a summary that takes focus after a failed submit, values you edit in place and live character counts.

Installation

pnpm add github:ahmadassaf/design-system

import Forms from '@gaudi/design-system/blocks/Forms';

Usage

import { FormErrorSummary, useFormValidation, validators } from '@gaudi/design-system/blocks/Forms';import Button from '@gaudi/design-system/core/Button';import { EmailInput } from '@gaudi/design-system/core/Input';
function ContactForm() {  const form = useFormValidation({    initialValues: { email: '' },    rules: { email: [validators.required('Enter an email.'), validators.email()] }  });  return <form onSubmit={form.handleSubmit(saveContact)}>    <FormErrorSummary form={form} labels={{ email: 'Email' }} />    <EmailInput aria-label='Email' {...form.field('email')} />    <Button type='submit'>Save contact</Button>  </form>;}

Examples

Developer · Create an API key

Launch · New app with live summary

Feedback · Article survey

Compliance · Business verification

Checkout · Address and payment

Contact · Message with error summary

Onboarding · Customer intake

Events · Registration with email code

Billing · Hosted checkout setup

Billing · Invoice with line items

Commerce · New product

Newsletter · Signup and preferences

Profile · Card with completion and office hours

Profile · Tabs with audit rail

Security · Sign-in policy

Support · Ticket details

Team · Invite with permissions

API

Accessibility

Errors sit next to their control, are linked with aria-describedby and mark it aria-invalid. The summary is an alert that receives focus and moves focus to a field from each link. EditableField returns focus to Edit after Save, Cancel or Escape.

Notes

• Lay out rows with FieldGroup and Field orientation=responsive; Forms adds behaviour, not layout.

Related