Skip to main content

Variable: Form

const Form: <TFieldValues, TContext, TTransformedValues>(__namedParameters) => Element & object

Defined in: packages/forms/src/Form.tsx:65

Form is the root component for all form compositions. It wraps react-hook-form's FormProvider and an HTML <form> element, forwarding submission handling.

Use the compound sub-components for structure:

  • Form.Group – groups related fields with optional title/description
  • Form.Actions – footer bar for Submit / Cancel / Reset buttons

Type Declaration​

Actions()​

Actions: (__namedParameters) => Element = FormActions

FormActions is a layout container for form action buttons such as Submit, Cancel, and Reset. It renders a flex row with consistent spacing.

Use align to control horizontal button placement ('left', 'center', or 'right'). Use sticky to keep the action bar visible while the user scrolls through a long form.

Parameters​

__namedParameters​

FormActionsProps

Returns​

Element

Example​

<Form.Actions align="right" sticky>
  <Button variant="secondary" onClick={onCancel}>Cancel</Button>
  <Button type="submit">Save</Button>
</Form.Actions>

Group()​

Group: (props) => Element = FormGroup

FormGroup is a layout container that organises form fields into labelled, optionally nested sections. Each nested FormGroup increments an internal level counter exposed via useFormGroup, which drives a data-level attribute and top-margin spacing so deeper groups are visually indented.

Parameters​

props​

FormGroupProps

Returns​

Element

Examples​

<FormGroup title="Personal details">
  <FormFieldInput name="firstName" label="First name" />
  <FormFieldInput name="lastName" label="Last name" />

  <FormGroup title="Address" direction="row">
    <FormFieldInput name="city" label="City" />
    <FormFieldInput name="zip" label="ZIP" />
  </FormGroup>
</FormGroup>

// Show a group-level validation error (e.g. for an array field)

<FormGroup name="items" title="Items">
  {fields.map((field, i) => (
    <FormFieldInput key={field.id} name={`items[${i}].value`} label="Value" />
  ))}
</FormGroup>

Example​

const methods = useForm<FormValues>();

<Form {...methods} onSubmit={handleSubmit}>
  <Form.Group title="Personal details">
    <FormFieldInput name="firstName" label="First name" />
  </Form.Group>
  <Form.Actions>
    <Button variant="secondary" onClick={onCancel}>Cancel</Button>
    <Button type="submit">Save</Button>
  </Form.Actions>
</Form>