Data Entryduskmoonimplemented6 demos

Form

Form coordinates form state, validation, field layout, and submit handling.

Import@duskmoon-dev/components/form

16API sections

77documented props

4behavior scenarios

Key API

forminitialValueslayoutdisabledlabelColwrapperCol

Usage

When to use

Use it inside forms, filters, settings, and any workflow that captures user input.
Prefer controlled props when the value must stay synchronized with application state.

Implementation notes

StylesheetImport @duskmoon-dev/components/styles.css once in the app or docs shell.

StateStart with default props for static examples, then switch to controlled props when state must be shared.

ThemeThe preview inherits the active DuskMoon data-theme value from the docs layout.

Features

Controlled and uncontrolled usage

Documents default values, value props, and change callbacks for form integration.

Validation state

Surfaces status, size, disabled, and option data patterns where the component supports them.

Primary API surface

Form is most often configured through `form`, `initialValues`, `layout`, `disabled`.

Covered behavior

Binds item values and submits form values

Feature Demos

Feature demos are authored for the component page, then supplemented with behavior scenarios from the component test coverage.

Preview

Basic usage

authored

Import the component stylesheet and Form from its package subpath, then render it with the core props.

Source

import "@duskmoon-dev/components/styles.css";
import { Form } from "@duskmoon-dev/components/form";

export function Example() {
  return (<Form
  layout="vertical"
  initialValues={{ project: "DuskMoon" }}
  onFinish={(values) => console.log(values)}
>
  <Form.Item
    name="project"
    label="Project"
    rules={[{ required: true, message: "Project is required" }]}
    extra="The name shown in dashboards."
  >
    <input placeholder="Project name" />
  </Form.Item>
  <Form.Item>
    <button type="submit">Save</button>
  </Form.Item>
</Form>);
}

Preview

Binds item values and submits form values

test-backed

Form scenario from the component test coverage: binds item values and submits form values.

Source

import "@duskmoon-dev/components/styles.css";
import { Form } from "@duskmoon-dev/components/form";

export function FormBindsItemValuesAndDemo() {
  return (<Form
  layout="vertical"
  initialValues={{ project: "DuskMoon" }}
  onFinish={(values) => console.log(values)}
>
  <Form.Item
    name="project"
    label="Project"
    rules={[{ required: true, message: "Project is required" }]}
    extra="The name shown in dashboards."
  >
    <input placeholder="Project name" />
  </Form.Item>
  <Form.Item>
    <button type="submit">Save</button>
  </Form.Item>
</Form>);
}

Preview

Validates required fields and renders item errors

test-backed

Form scenario from the component test coverage: validates required fields and renders item errors.

Source

import "@duskmoon-dev/components/styles.css";
import { Form } from "@duskmoon-dev/components/form";

export function FormValidatesRequiredFieldsAndDemo() {
  return (<Form
  layout="vertical"
  initialValues={{ project: "DuskMoon" }}
  onFinish={(values) => console.log(values)}
>
  <Form.Item
    name="project"
    label="Project"
    rules={[{ required: true, message: "Project is required" }]}
    extra="The name shown in dashboards."
  >
    <input placeholder="Project name" />
  </Form.Item>
  <Form.Item>
    <button type="submit">Save</button>
  </Form.Item>
</Form>);
}

Preview

Exposes useForm, useWatch, checked values, and reset

test-backed

Form scenario from the component test coverage: exposes useform, usewatch, checked values, and reset.

Source

import "@duskmoon-dev/components/styles.css";
import { Form } from "@duskmoon-dev/components/form";

export function FormExposesUseFormUseWatchCheckedDemo() {
  return (<Form
  layout="vertical"
  initialValues={{ project: "DuskMoon" }}
  onFinish={(values) => console.log(values)}
>
  <Form.Item
    name="project"
    label="Project"
    rules={[{ required: true, message: "Project is required" }]}
    extra="The name shown in dashboards."
  >
    <input placeholder="Project name" />
  </Form.Item>
  <Form.Item>
    <button type="submit">Save</button>
  </Form.Item>
</Form>);
}

Preview

Supports list operations and error list

test-backed

Form scenario from the component test coverage: supports list operations and error list.

Source

import "@duskmoon-dev/components/styles.css";
import { Form } from "@duskmoon-dev/components/form";

export function FormSupportsListOperationsAndDemo() {
  return (<Form
  layout="vertical"
  initialValues={{ project: "DuskMoon" }}
  onFinish={(values) => console.log(values)}
>
  <Form.Item
    name="project"
    label="Project"
    rules={[{ required: true, message: "Project is required" }]}
    extra="The name shown in dashboards."
  >
    <input placeholder="Project name" />
  </Form.Item>
  <Form.Item>
    <button type="submit">Save</button>
  </Form.Item>
</Form>);
}

Preview

Theme aware

authored

Docs previews inherit the DuskMoon data-theme value. Use the header switch to compare light and dark rendering.

Source

<div data-theme="sunshine">
  <Form
  layout="vertical"
  initialValues={{ project: "DuskMoon" }}
  onFinish={(values) => console.log(values)}
>
  <Form.Item
    name="project"
    label="Project"
    rules={[{ required: true, message: "Project is required" }]}
    extra="The name shown in dashboards."
  >
    <input placeholder="Project name" />
  </Form.Item>
  <Form.Item>
    <button type="submit">Save</button>
  </Form.Item>
</Form>
</div>

<div data-theme="moonlight">
  <Form
  layout="vertical"
  initialValues={{ project: "DuskMoon" }}
  onFinish={(values) => console.log(values)}
>
  <Form.Item
    name="project"
    label="Project"
    rules={[{ required: true, message: "Project is required" }]}
    extra="The name shown in dashboards."
  >
    <input placeholder="Project name" />
  </Form.Item>
  <Form.Item>
    <button type="submit">Save</button>
  </Form.Item>
</Form>
</div>

API

The API reference below lists every parsed exported type or interface for Form. Start with `form`, `initialValues`, `layout`, `disabled` for common usage.

Types: packages/components/src/components/form/Form.types.tsScenarios: packages/components/src/components/form/Form.test.tsx

FormPropsinterface extends < T extends Record<string, unknown> = Record<string, unknown>, > extends Omit< ComponentProps<"form">, "children" | "onSubmit" | "onFinish" | "onChange" >

Prop	Type	Required	Description
`children`	`ReactNode`	No	children configures Form.
`form`	`FormInstance<T>`	No	form configures Form.
`initialValues`	`Partial<T>`	No	initialValues configures Form.
`layout`	`FormLayout`	No	layout configures Form.
`disabled`	`boolean`	No	disabled configures Form.
`labelCol`	`unknown`	No	labelCol configures Form.
`wrapperCol`	`unknown`	No	wrapperCol configures Form.
`colon`	`boolean`	No	colon configures Form.
`requiredMark`	`boolean`	No	requiredMark configures Form.
`onFinish`	`(values: Partial<T>) => void`	No	onFinish configures Form.
`onFinishFailed`	`(errorInfo: {`	No	onFinishFailed configures Form.
`errorFields`	`FieldError[]`	Yes	errorFields configures Form.
`values`	`Partial<T>`	Yes	values configures Form.
`onValuesChange`	`(changedValues: Partial<T>, values: Partial<T>) => void`	No	onValuesChange configures Form.

FormRuleinterface

Prop	Type	Required	Description
`required`	`boolean`	No	required configures Form.
`message`	`ReactNode`	No	message configures Form.
`validator`	`(rule: FormRule, value: unknown) => Promise<void> \| void`	No	validator configures Form.

FieldErrorinterface

Prop	Type	Required	Description
`name`	`FormNamePath`	Yes	name configures Form.
`errors`	`ReactNode[]`	Yes	errors configures Form.

FormInstanceinterface extends < T extends Record<string, unknown> = Record<string, unknown>, >

Prop	Type	Required	Description
`getFieldValue`	`(name: FormNamePath) => unknown`	Yes	getFieldValue configures Form.
`getFieldsValue`	`() => Partial<T>`	Yes	getFieldsValue configures Form.
`setFieldValue`	`(name: FormNamePath, value: unknown) => void`	Yes	setFieldValue configures Form.
`setFieldsValue`	`(values: Partial<T>) => void`	Yes	setFieldsValue configures Form.
`resetFields`	`(names?: FormNamePath[]) => void`	Yes	resetFields configures Form.
`validateFields`	`(names?: FormNamePath[]) => Promise<Partial<T>>`	Yes	validateFields configures Form.
`submit`	`() => void`	Yes	submit configures Form.

FormContextValueinterface

Prop	Type	Required	Description
`form`	`FormInstance`	Yes	form configures Form.
`disabled`	`boolean`	No	disabled configures Form.
`layout`	`FormLayout`	Yes	layout configures Form.
`labelCol`	`unknown`	No	labelCol configures Form.
`wrapperCol`	`unknown`	No	wrapperCol configures Form.
`colon`	`boolean`	No	colon configures Form.
`requiredMark`	`boolean`	No	requiredMark configures Form.
`registerField`	`(name: FormNamePath, rules?: FormRule[]) => () => void`	Yes	registerField configures Form.
`getFieldError`	`(name: FormNamePath) => ReactNode[]`	Yes	getFieldError configures Form.
`setFieldError`	`(name: FormNamePath, errors: ReactNode[]) => void`	Yes	setFieldError configures Form.

FormItemPropsinterface extends Omit< ComponentProps<"div">, "children" | "onChange" | "title" >

Prop	Type	Required	Description
`children`	`ReactNode`	No	children configures Form.
`name`	`FormNamePath`	No	name configures Form.
`label`	`ReactNode`	No	label configures Form.
`rules`	`FormRule[]`	No	rules configures Form.
`required`	`boolean`	No	required configures Form.
`valuePropName`	`string`	No	valuePropName configures Form.
`trigger`	`string`	No	trigger configures Form.
`extra`	`ReactNode`	No	extra configures Form.
`help`	`ReactNode`	No	help configures Form.
`noStyle`	`boolean`	No	noStyle configures Form.

FormListFieldDatainterface

Prop	Type	Required	Description
`key`	`number`	Yes	key configures Form.
`name`	`number`	Yes	name configures Form.
`fieldKey`	`number`	Yes	fieldKey configures Form.

FormListOperationinterface

Prop	Type	Required	Description
`add`	`(defaultValue?: unknown, insertIndex?: number) => void`	Yes	add configures Form.
`remove`	`(index: number \| number[]) => void`	Yes	remove configures Form.
`move`	`(from: number, to: number) => void`	Yes	move configures Form.

FormListPropsinterface

Prop	Type	Required	Description
`name`	`FormNamePath`	Yes	name configures Form.
`initialValue`	`unknown[]`	No	initialValue configures Form.
`children`	`(`	Yes	children configures Form.
`fields`	`FormListFieldData[],`	Yes	fields configures Form.
`operation`	`FormListOperation,`	Yes	operation configures Form.
`meta`	`{ errors: ReactNode[] },`	Yes	meta configures Form.

ErrorListPropsinterface extends ComponentProps<"div">

Prop	Type	Required	Description
`errors`	`ReactNode[]`	No	errors configures Form.

FormProviderPropsinterface

Prop	Type	Required	Description
`children`	`ReactNode`	No	children configures Form.
`onFormChange`	`(`	No	onFormChange configures Form.
`name`	`string,`	Yes	name configures Form.
`info`	`{ changedFields: unknown[]; forms: Record<string, FormInstance> },`	Yes	info configures Form.
`onFormFinish`	`(`	No	onFormFinish configures Form.
`name`	`string,`	Yes	name configures Form.
`info`	`{ values: unknown; forms: Record<string, FormInstance> },`	Yes	info configures Form.

FormComponentinterface

Prop	Type	Required	Description
`props`	`FormProps<T> & RefAttributes<FormInstance<T>>,`	Yes	props configures Form.
`useForm`	`<T extends Record<string, unknown> = Record<string, unknown>>(`	Yes	useForm configures Form.
`form`	`FormInstance<T>,`	No	form configures Form.
`useFormInstance`	`() => FormInstance`	Yes	useFormInstance configures Form.
`useWatch`	`(name: FormNamePath, form?: FormInstance) => unknown`	Yes	useWatch configures Form.
`Item`	`FormItemComponent`	Yes	Item configures Form.
`List`	`FormListComponent`	Yes	List configures Form.
`ErrorList`	`ForwardRefExoticComponent<`	Yes	ErrorList configures Form.
`Provider`	`(props: FormProviderProps) => ReactElement \| null`	Yes	Provider configures Form.
`Context`	`Context<FormContextValue \| null>`	Yes	Context configures Form.
`create`	`() => void`	Yes	create configures Form.

FormNamePathtype

string | number | Array<string | number>

FormLayouttype

"horizontal" | "vertical" | "inline"

FormItemComponenttype

ForwardRefExoticComponent< FormItemProps & RefAttributes<HTMLDivElement> >

FormListComponenttype

(props: FormListProps) => ReactElement | null