All of the input components are returned from useForm().
Example
const {
Form,
TextInput,
NumberInput,
Experimental_RichTextInput,
Checkbox,
Toggle,
Experimental_DateTimeInput,
Experimental_PlainDateInput,
Combobox,
Experimental_AttioUserCombobox,
Experimental_AttioRecordCombobox,
InputGroup,
SubmitButton,
} = useForm(
{
// Text inputs
textField: Forms.string(),
emailField: Forms.string(),
passwordField: Forms.string(),
telField: Forms.string(),
urlField: Forms.string(),
// Number input
numberField: Forms.number(),
// Rich text
richTextField: Forms.string(),
// Boolean inputs
checkboxField: Forms.boolean(),
toggleField: Forms.boolean(),
// Date inputs
dateTimeField: Forms.dateTime(),
plainDateField: Forms.plainDate(),
// Comboboxes
plainComboboxField: Forms.string(),
// User combobox
userComboboxField: Forms.string(),
// Record combobox
recordComboboxField: Forms.attioRecord(),
},
{} // initial values
)
return (
<Form
onSubmit={async (values) => {
await showToast({
title: "Form submitted",
variant: "success",
text: JSON.stringify(values, null, 2),
})
hideDialog()
}}
>
<InputGroup>
<TextInput label="Text Input" name="textField" placeholder="Enter text" />
<TextInput type="email" label="Email Input" name="emailField" placeholder="Enter email" />
<TextInput type="password" label="Password Input" name="passwordField" placeholder="Enter password" />
</InputGroup>
<InputGroup>
<TextInput type="tel" label="Telephone Input" name="telField" placeholder="Enter phone number" />
<TextInput type="url" label="URL Input" name="urlField" placeholder="Enter URL" />
<NumberInput label="Number Input" name="numberField" placeholder="Enter a number" />
</InputGroup>
<InputGroup>
<Experimental_RichTextInput label="Rich Text Input" name="richTextField" placeholder="Enter rich text" />
</InputGroup>
<InputGroup>
<Checkbox label="Checkbox" name="checkboxField" />
<Toggle label="Toggle" name="toggleField" />
</InputGroup>
<InputGroup>
<Experimental_DateTimeInput label="Date Time Input" name="dateTimeField" placeholder="Select date and time" />
<Experimental_PlainDateInput label="Plain Date Input" name="plainDateField" placeholder="Select date" />
</InputGroup>
<InputGroup>
<Combobox
label="Plain Combobox"
name="plainComboboxField"
options={cities}
placeholder="Select a city"
/>
</InputGroup>
<InputGroup>
<Experimental_AttioUserCombobox
label="User Combobox"
name="userComboboxField"
placeholder="Select a user"
/>
<Experimental_AttioRecordCombobox
label="Record Combobox"
name="recordComboboxField"
placeholder="Select a record"
/>
</InputGroup>
<SubmitButton label="Submit" />
</Form>
)
Parameters
schema
Record<string, FormValue>
required
A form schema is how you tell Attio about the shape and validation rules of your form data. initialValues
Record<string, any>
required
These values must match the type defined by your form schema. Returns
useForm returns an object containing the following functions and React components.
change
(path: string, value: any) => void
An imperative function to update a particular value in the form.
An imperative function to submit the form. It will cause validation to run, and if the validation passes it will call the onSubmit handler that you have passed to <Form/>.You should typically prefer to render a <SubmitButton /> instead of calling submit directly.
Experimental_AttioRecordCombobox
Experimental_AttioUserCombobox
