<Form />

A component that wraps your workspace settings inputs.

This component is returned by Settings.useForm().

You are required to render one – and only one – of these to make your workspace settings work.

All content should be inside <Section />s within the <Form />.

Example

src/app/settings/page.tsx

import React from "react"
import {Settings} from "attio/client"

import schema from "./schema"

export default Settings.defineWorkspacePage(schema, () => {
  const {Form, Section, TextInput} = Settings.useForm(schema)

  return (
    <Form>
      <Section title="General">
        <TextInput label="Display name" name="display_name" />
        <TextInput label="Webhook URL" name="webhook_url" type="url" />
      </Section>
    </Form>
  )
})

Props

children · React.ReactNode · required

The contents of your workspace settings form: <Section />s holding the inputs and any other content.

Unlike regular forms, the <Form /> component from Settings.useForm() does not have an onSubmit prop. Settings are automatically saved.