This component is returned by useForm().

​
Example: Conditional fields

<WithState /> allows you to access the form values via render props in the JSX, so you can conditionally render fields.
conditional-fields-dialog.tsx
import React from "react";
import { Forms, useForm, showToast } from "attio/client";

export function HelloWorldDialog() {
	const { Form, SubmitButton, Checkbox, TextInput, WithState } = useForm(
		{
			requireName: Forms.boolean(),
			name: Forms.string(),
		},
		{
			requireName: false,
			name: "",
		},
	);
	return (
		<Form
			onSubmit={async (values) => {
				await showToast({
					title: "Form submitted",
					variant: "success",
					text: JSON.stringify(values),
				});
			}}
		>
			<Checkbox label="Require name" name="requireName" />
			<WithState values>
				{({ values }) =>
					values.requireName ? <TextInput label="Name" name="name" /> : <></>
				}
			</WithState>
			<SubmitButton label="Submit" />
		</Form>
	);
}

​
Example: Submitting state

<WithState /> allows you to know whether or not the form is currently being submitted, so you can change the UI, e.g. disabling a secondary button.
submitting-state-dialog.tsx
import React from "react";
import { Forms, useForm, showToast, Button } from "attio/client";

export function SubmittingStateDialog() {
	const { Form, SubmitButton, TextInput, WithState } = useForm(
		{
			name: Forms.string(),
		},
		{
			name: "",
		},
	);
	return (
		<Form
			onSubmit={async (values) => {
				await new Promise((resolve) => setTimeout(resolve, 2_000));
				await showToast({
					title: "Form submitted",
					variant: "success",
					text: JSON.stringify(values),
				});
			}}
		>
			<TextInput label="Name" name="name" />

			<WithState submitting>
				{({ submitting }) => (
					<Button
						label="Remove"
						variant="destructive"
						disabled={submitting}
						onClick={() => {
							// do something
						}}
					/>
				)}
			</WithState>
			<SubmitButton label="Submit" />
		</Form>
	);
}

​
Props

​
errors
boolean
Whether or not to request the form validation errors.Defaults to false.If true, the errors will be passed to the children render prop.
​
submitting
boolean
Whether or not to request whether the form is currently being submitted.Defaults to false.If true, the submitting will be passed to the children render prop.
​
values
boolean
Whether or not to request the form values.Defaults to false.If true, the values will be passed to the children render prop.
​
children
({ errors, submitting, values }) => React.ReactNode
A render prop that receives the requested form state.

​
errors? : Object

An object of form validation errors in the same shape as your form values.

​
submitting? : boolean

true until the Promise resolves from onSubmit, false otherwise.

​
values? : Object

The current values of your form.