Skip to main content
This component is returned by useForm().

​
Example

approval-dialog.tsx
import React from "react";
import { Forms, useForm, showToast } from "attio/client";

export function ApprovalDialog() {
	const { Form, SubmitButton, Toggle } = useForm(
		{
			approved: Forms.boolean(),
		},
		{
			approved: false,
		},
	);
	return (
		<Form
			onSubmit={async (values) => {
				await showToast({
					title: "Form submitted",
					variant: "success",
					text: values.approved ? "Approved" : "Not approved",
				});
			}}
		>
			{/* Some information here */}
			<Toggle label="Approved" name="approved" />
			<SubmitButton label="Submit" />
		</Form>
	);
}

​
Props

​
label
string
required
The label of the input field.
​
name
string
required
The path to the boolean value of the input field in your form schema.e.g. "is_active", "shipping.is_express"
​
disabled
boolean
Whether or not the field should be disabled.Defaults to false (not disabled).