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

​
Example

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

export function FormTextInputDialog() {
	const { Form, SubmitButton, TextInput } = useForm(
		{
			firstName: Forms.string(),
			lastName: Forms.string(),
		},
		{
			firstName: "",
			lastName: "",
		},
	);
	return (
		<Form
			onSubmit={async (values) => {
				await showToast({
					title: "Form submitted",
					variant: "success",
					text: JSON.stringify(values),
				});
			}}
		>
			<TextInput label="First name" name="firstName" />
			<TextInput label="Last name" name="lastName" />
			<SubmitButton label="Submit" />
		</Form>
	);
}

​
Props

​
label
string
required
The label of the input field.
​
name
string
required
The path to the string value of the input field in your form schema.e.g. "name", "shipping.address.street"
​
type
"text" | "email" | "password" | "tel" | "url"
The type of the input field.They roughly correspond to the HTML types text, email, password, tel, and url.Defaults to "text".
Useful on mobile devices with virtual keyboards.
​
placeholder
string
An optional placeholder text for your input.
​
disabled
boolean
Whether or not the field should be disabled.Defaults to false (not disabled).