---
name: DataForm
package: '@wordpress/dataviews'
category: DataViews
status: stable
canonical: 'https://system.automattic.design/components/dataform/'
storybook: 'https://wordpress.github.io/gutenberg/?path=/docs/dataviews-dataform--docs'
github: 'https://github.com/WordPress/gutenberg/tree/trunk/packages/dataviews/src/dataform'
---

# DataForm

```tsx
import { DataForm } from '@wordpress/dataviews';
```

## Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `data` *(required)* | `Item` | — |  |
| `fields` *(required)* | `Field< Item >[]` | — |  |
| `form` *(required)* | `{ 	layout?: Layout; 	fields?: Array< FormField \| string >; }` | — |  |
| `onChange` *(required)* | `( value: Record< string, any > ) => void` | — |  |
| `validity` | `Record< string, FieldValidity > \| undefined` | — |  |


## Examples

### Layout Card

```tsx
const LayoutCard = () => <DataForm withHeader withSummary isCollapsible />;
```

### Layout Details

```tsx
const LayoutDetails = () => <DataForm />;
```

### Layout Panel

```tsx
const LayoutPanel = () => <DataForm openAs="default" />;
```

### Layout Regular

```tsx
const LayoutRegular = () => <DataForm disabled={false} />;
```

### Layout Row

```tsx
const LayoutRow = () => <DataForm alignment="default" />;
```

### Layout Mixed

```tsx
const LayoutMixed = () => <DataForm />;
```

### Validation

```tsx
const Validation = () => <DataForm
    layout="regular"
    required
    elements="sync"
    custom="sync"
    pattern={false}
    minMax={false} />;
```

### Visibility

```tsx
const Visibility = () => <DataForm />;
```

### Data Adapter

```tsx
const DataAdapter = () => <DataForm />;
```