Standard duskmoon implemented 6 demos

Form

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

Import @duskmoon-dev/components/form

16 API sections

77 documented props

4 behavior 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

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

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

Theme The 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.ts Scenarios: packages/components/src/components/form/Form.test.tsx

FormProps interface 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.

FormRule interface

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.

FieldError interface

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

FormInstance interface 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.

FormContextValue interface

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.

FormItemProps interface 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.

FormListFieldData interface

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

FormListOperation interface

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.

FormListProps interface

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.

ErrorListProps interface extends ComponentProps<"div">

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

FormProviderProps interface

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.

FormComponent interface

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.

FormNamePath type

string | number | Array<string | number>

FormLayout type

"horizontal" | "vertical" | "inline"

FormItemComponent type

ForwardRefExoticComponent< FormItemProps & RefAttributes<HTMLDivElement> >

FormListComponent type

(props: FormListProps) => ReactElement | null