## Import

```jsx
import { Form } from "@cfa/react-core";
```

## Live Editor

`compact` tightens the gap between fields.

```jsx
<Form compact onSubmit={(e) => e.preventDefault()}>
  <TextInput name="email" label="Email" type="email" />
  <TextInput name="name" label="Name" />
  <Button type="submit">Submit</Button>
</Form>
```

## Props

### Form

| Name | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| compact | `boolean` | - | - |
| action | `string \ | ((formData: FormData) => void \ | Promise<void>)` | - | Where to send the form-data when the form is submitted. See \[MDN]\(https\://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#action). |
| aria-describedby | `string` | - | Identifies the element (or elements) that describes the object. |
| aria-details | `string` | - | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| aria-label | `string` | - | Defines a string value that labels the current element. |
| aria-labelledby | `string` | - | Identifies the element (or elements) that labels the current element. |
| autoCapitalize | `"characters" \ | "none" \ | "off" \ | "on" \ | "sentences" \ | "words"` | - | Controls whether inputted text is automatically capitalized and, if so, in what manner. See \[MDN]\(https\://developer.mozilla.org/en-US/docs/Web/HTML/Global\_attributes/autocapitalize). |
| autoComplete | `"off" \ | "on"` | - | Indicates whether input elements can by default have their values automatically completed by the browser. See \[MDN]\(https\://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#autocomplete). |
| children | `ReactNode` | - | The children of the component. |
| className | `string` | `'react-aria-Form'` | The CSS \[className]\(https\://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. |
| dir | `string` | - | - |
| encType | `"application/x-www-form-urlencoded" \ | "multipart/form-data" \ | "text/plain"` | - | The enctype attribute specifies how the form-data should be encoded when submitting it to the server. See \[MDN]\(https\://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#enctype). |
| hidden | `boolean` | - | - |
| id | `string` | - | The element's unique identifier. See \[MDN]\(https\://developer.mozilla.org/en-US/docs/Web/HTML/Global\_attributes/id). |
| inert | `boolean` | - | - |
| lang | `string` | - | - |
| method | `"dialog" \ | "get" \ | "post"` | - | The HTTP method to submit the form with. See \[MDN]\(https\://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#method). |
| onAnimationEnd | `AnimationEventHandler<HTMLFormElement>` | - | - |
| onAnimationEndCapture | `AnimationEventHandler<HTMLFormElement>` | - | - |
| onAnimationIteration | `AnimationEventHandler<HTMLFormElement>` | - | - |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLFormElement>` | - | - |
| onAnimationStart | `AnimationEventHandler<HTMLFormElement>` | - | - |
| onAnimationStartCapture | `AnimationEventHandler<HTMLFormElement>` | - | - |
| onAuxClick | `MouseEventHandler<HTMLFormElement>` | - | - |
| onAuxClickCapture | `MouseEventHandler<HTMLFormElement>` | - | - |
| onClick | `MouseEventHandler<HTMLFormElement>` | - | - |
| onClickCapture | `MouseEventHandler<HTMLFormElement>` | - | - |
| onContextMenu | `MouseEventHandler<HTMLFormElement>` | - | - |
| onContextMenuCapture | `MouseEventHandler<HTMLFormElement>` | - | - |
| onDoubleClick | `MouseEventHandler<HTMLFormElement>` | - | - |
| onDoubleClickCapture | `MouseEventHandler<HTMLFormElement>` | - | - |
| onGotPointerCapture | `PointerEventHandler<HTMLFormElement>` | - | - |
| onGotPointerCaptureCapture | `PointerEventHandler<HTMLFormElement>` | - | - |
| onInvalid | `((event: FormEvent<HTMLFormElement>) => void)` | - | Triggered for each invalid field when a user submits the form. |
| onLostPointerCapture | `PointerEventHandler<HTMLFormElement>` | - | - |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLFormElement>` | - | - |
| onMouseDown | `MouseEventHandler<HTMLFormElement>` | - | - |
| onMouseDownCapture | `MouseEventHandler<HTMLFormElement>` | - | - |
| onMouseEnter | `MouseEventHandler<HTMLFormElement>` | - | - |
| onMouseLeave | `MouseEventHandler<HTMLFormElement>` | - | - |
| onMouseMove | `MouseEventHandler<HTMLFormElement>` | - | - |
| onMouseMoveCapture | `MouseEventHandler<HTMLFormElement>` | - | - |
| onMouseOut | `MouseEventHandler<HTMLFormElement>` | - | - |
| onMouseOutCapture | `MouseEventHandler<HTMLFormElement>` | - | - |
| onMouseOver | `MouseEventHandler<HTMLFormElement>` | - | - |
| onMouseOverCapture | `MouseEventHandler<HTMLFormElement>` | - | - |
| onMouseUp | `MouseEventHandler<HTMLFormElement>` | - | - |
| onMouseUpCapture | `MouseEventHandler<HTMLFormElement>` | - | - |
| onPointerCancel | `PointerEventHandler<HTMLFormElement>` | - | - |
| onPointerCancelCapture | `PointerEventHandler<HTMLFormElement>` | - | - |
| onPointerDown | `PointerEventHandler<HTMLFormElement>` | - | - |
| onPointerDownCapture | `PointerEventHandler<HTMLFormElement>` | - | - |
| onPointerEnter | `PointerEventHandler<HTMLFormElement>` | - | - |
| onPointerLeave | `PointerEventHandler<HTMLFormElement>` | - | - |
| onPointerMove | `PointerEventHandler<HTMLFormElement>` | - | - |
| onPointerMoveCapture | `PointerEventHandler<HTMLFormElement>` | - | - |
| onPointerOut | `PointerEventHandler<HTMLFormElement>` | - | - |
| onPointerOutCapture | `PointerEventHandler<HTMLFormElement>` | - | - |
| onPointerOver | `PointerEventHandler<HTMLFormElement>` | - | - |
| onPointerOverCapture | `PointerEventHandler<HTMLFormElement>` | - | - |
| onPointerUp | `PointerEventHandler<HTMLFormElement>` | - | - |
| onPointerUpCapture | `PointerEventHandler<HTMLFormElement>` | - | - |
| onReset | `((event: FormEvent<HTMLFormElement>) => void)` | - | Triggered when a user resets the form. |
| onScroll | `UIEventHandler<HTMLFormElement>` | - | - |
| onScrollCapture | `UIEventHandler<HTMLFormElement>` | - | - |
| onSubmit | `((event: FormEvent<HTMLFormElement>) => void)` | - | Triggered when a user submits the form. |
| onTouchCancel | `TouchEventHandler<HTMLFormElement>` | - | - |
| onTouchCancelCapture | `TouchEventHandler<HTMLFormElement>` | - | - |
| onTouchEnd | `TouchEventHandler<HTMLFormElement>` | - | - |
| onTouchEndCapture | `TouchEventHandler<HTMLFormElement>` | - | - |
| onTouchMove | `TouchEventHandler<HTMLFormElement>` | - | - |
| onTouchMoveCapture | `TouchEventHandler<HTMLFormElement>` | - | - |
| onTouchStart | `TouchEventHandler<HTMLFormElement>` | - | - |
| onTouchStartCapture | `TouchEventHandler<HTMLFormElement>` | - | - |
| onTransitionCancel | `TransitionEventHandler<HTMLFormElement>` | - | - |
| onTransitionCancelCapture | `TransitionEventHandler<HTMLFormElement>` | - | - |
| onTransitionEnd | `TransitionEventHandler<HTMLFormElement>` | - | - |
| onTransitionEndCapture | `TransitionEventHandler<HTMLFormElement>` | - | - |
| onTransitionRun | `TransitionEventHandler<HTMLFormElement>` | - | - |
| onTransitionRunCapture | `TransitionEventHandler<HTMLFormElement>` | - | - |
| onTransitionStart | `TransitionEventHandler<HTMLFormElement>` | - | - |
| onTransitionStartCapture | `TransitionEventHandler<HTMLFormElement>` | - | - |
| onWheel | `WheelEventHandler<HTMLFormElement>` | - | - |
| onWheelCapture | `WheelEventHandler<HTMLFormElement>` | - | - |
| render | `DOMRenderFunction<"form", undefined>` | - | Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components.&#xA;&#xA;Requirements:&#xA;&#xA;- You must render the expected element type (e.g. if \`\<button>\` is expected, you cannot render an \`\<a>\`).&#xA;- Only a single root DOM element can be rendered (no fragments).&#xA;- You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate. |
| role | `"presentation" \ | "search"` | - | An ARIA role override to apply to the form element. |
| style | `CSSProperties` | - | The inline \[style]\(https\://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. |
| suppressHydrationWarning | `boolean` | - | A React-only flag that suppresses the warning React normally logs when an element's server-rendered content doesn't match the client render during hydration. See \[React docs]\(https\://react.dev/reference/react-dom/client/hydrateRoot#suppressing-unavoidable-hydration-mismatch-errors). |
| target | `"_blank" \ | "_parent" \ | "_self" \ | "_top"` | - | The target attribute specifies a name or a keyword that indicates where to display the response that is received after submitting the form. See \[MDN]\(https\://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#target). |
| translate | `"no" \ | "yes"` | - | - |
| validationBehavior | `"aria" \ | "native"` | `'native'` | Whether to use native HTML form validation to prevent form submission when a field value is missing or invalid, or mark fields as required or invalid via ARIA. |
| validationErrors | `ValidationErrors` | - | Validation errors for the form, typically returned by a server. This should be set to an object mapping from input names to errors. |