Automattic Design System

Components

DataForm

DataForm renders an auto-generated form for viewing and editing the fields of a data item, driven by a fields and form layout configuration. Use it to edit items of a dataset, often alongside DataViews.

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

View on Storybook

View source on GitHub

PropsPermalink to this section

NameDefaultDescription
data Required

Item

The item being edited.

fields Required

Field<Item>[]

The field definitions for the item.

form Required

Form

The form configuration: which fields to render and with which layout.

onChange Required

(value: Record<string, any>) => void

Callback invoked when the user edits a field, receiving the partial item returned by the field’s setValue. By default that is an object keyed by field id, nested for dotted ids (e.g. { a: { b: value } } for the field a.b); a custom setValue may return any other partial shape of the item.

validity

Record<string, FieldValidity>

The validity state of the form’s fields, keyed by field id.

ExamplesPermalink to this section

Layout CardPermalink to this section

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

Layout DetailsPermalink to this section

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

Layout PanelPermalink to this section

const LayoutPanel = () => <DataForm openAs="default" showPlaceholderIfEmpty={false} disabled={false} />;

Layout RegularPermalink to this section

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

Layout RowPermalink to this section

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

Layout MixedPermalink to this section

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

ValidationPermalink to this section

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

Validation Panel Error IndicatorPermalink to this section

const ValidationPanelErrorIndicator = () => <DataForm />;

VisibilityPermalink to this section

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

Data AdapterPermalink to this section

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