@dotconnor/grommet
Version:
focus on the essential experience
113 lines (78 loc) • 1.98 kB
Markdown
## Form
A form that manages state for its fields.
[](https://storybook.grommet.io/?selectedKind=Input-Form&full=0&stories=1&panelRight=0) [](https://codesandbox.io/s/github/grommet/grommet-sandbox?initialpath=/form&module=%2Fsrc%2FForm.js)
## Usage
```javascript
import { Form } from 'grommet';
<Form />
```
## Properties
**errors**
An object representing any errors in the data. Their keys should
match the keys in the value object. Defaults to `{}`.
```
{
}
```
**infos**
An object representing any information details in the data.
Their keys should match the keys in the value object. Defaults to `{}`.
```
{
}
```
**messages**
Custom validation messages. Defaults to `{
"invalid": "invalid",
"required": "required"
}`.
```
{
invalid: string,
required: string
}
```
**onChange**
Function that will be called when any fields are updated.
The fields must have a non-null `name` property assigned.
```
function
```
**onSubmit**
Function that will be called when the form is submitted. The
single argument is an event containing the latest value object
via `event.value` and an object indicating which fields were
touched via `event.touched`.
```
function
```
**onReset**
Function that will be called when the form is reset. The
single argument is the event provided by react.
```
function
```
**onValidate**
Function that will be called when the form is validated. The
single argument is an event containing the latest error object
via `validationResults.errors` and info object via
`validationResults.infos`.
```
function
```
**validate**
When to perform validation Defaults to `submit`.
```
blur
submit
```
**value**
An object representing all of the data in the form. Defaults to `{}`.
```
{
}
```
## Intrinsic element
```
form
```