---
name: "Form"
mode: "component"
versionRequirements:
  - { name: "@ray-js/ray", version: "0.5.10" }
title: "Form - Form"
---

## Form

> [VERSION] @ray-js/ray >= 0.5.10

### Description

Form container for collecting and submitting input values from its child controls.

### Props

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `onSubmit` | `(event: FormSubmitEvent) => void` | No | - | Triggered on submit, carrying the form data |
| `onReset` | `(event: FormResetEvent) => void` | No | - | Triggered when the form is reset |

### Referenced Types

##### `interface` FormSubmitEvent

| Property | Type | Description |
| --- | --- | --- |
| `type` | `"submit"` | Event type |
| `detail` | `FormSubmitDetail` | Event data; retrieve form data via detail.value |

##### `interface` FormResetEvent

| Property | Type | Description |
| --- | --- | --- |
| `type` | `"reset"` | Event type |

##### `interface` FormSubmitDetail

| Property | Type | Description |
| --- | --- | --- |
| `value` | `Record<string, unknown>` | Form data, where keys are the names of form controls |

##### `interface` BaseEvent

| Property | Type | Description |
| --- | --- | --- |
| `type` | `string` | Event type |
| `timeStamp` | `number` | Time in milliseconds since the page opened |
| `target` | `Target` | Source component of the event |
| `currentTarget` | `Target` | Collection of property values for the current component |
| `mark` | `any` | Event mark data |

##### `interface` Target

| Property | Type | Description |
| --- | --- | --- |
| `id` | `string` | id of the event source component |
| `dataset` | `Record<string, unknown>` | Collection of custom attributes from the `dataset` on the event source component |


### Examples

#### Basic usage

```tsx
import React, { useState } from 'react';
import { Button, Input, Switch, View, Form, Text } from '@ray-js/ray';

export default function () {
  const [resultData, setResultData] = useState({});

  return (
    <View style={{ padding: '20px' }}>
      <Form
        onSubmit={(e) => {
          console.log('Submit form:', e.detail.value);
          setResultData(e.detail.value);
        }}
        onReset={() => {
          console.log('Reset form');
          setResultData({});
        }}
      >
        <View style={{ marginBottom: '16px' }}>
          <Text>Switch:</Text>
          <Switch name="switch" />
        </View>
        <View style={{ marginBottom: '16px' }}>
          <Text>Input:</Text>
          <Input name="input" placeholder="Please enter" />
        </View>
        <Button formType="submit" type="primary">
          Submit
        </Button>
        <Button formType="reset" style={{ marginTop: '10px' }}>
          Reset
        </Button>
      </Form>
    </View>
  );
}
```