A section of UI with a title. It can be thought of like a <div/> in DOM.
<div/>
import {Section} from "attio/client"
import React from "react"; import { Forms, useForm, showToast, Section } from "attio/client"; export function FormWithSectionsDialog() { const { Form, SubmitButton, TextInput } = useForm( { firstName: Forms.string(), lastName: Forms.string(), street: Forms.string(), city: Forms.string(), }, { firstName: "", lastName: "", street: "", city: "", }, ); return ( <Form onSubmit={async (values) => { await showToast({ title: "Form submitted", variant: "success", text: JSON.stringify(values), }); }} > <Section title="Personal information"> <TextInput label="First name" name="firstName" /> <TextInput label="Last name" name="lastName" /> </Section> <Section title="Address"> <TextInput label="Street" name="street" /> <TextInput label="City" name="city" /> </Section> <SubmitButton label="Submit" /> </Form> ); }
Was this page helpful?