> ## Documentation Index
> Fetch the complete documentation index at: https://docs.attio.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Settings.useForm()

> A hook for creating workspace settings forms inside your Attio app

`Settings.useForm()` returns the form components for a settings page. Pass your app's [settings schema](./define-workspace-schema); the components' `name` props are typed off it. Unlike regular forms created with [`useForm()`](../forms/use-form), workspace settings forms automatically save changes and don't require an `onSubmit` handler:

* Text inputs and number inputs save `onBlur` (when the user leaves the field)
* Toggles, checkboxes, and comboboxes save `onChange` (immediately when changed)

<Note>
  Only workspace admins can edit workspace settings. However, all workspace members can view the
  settings.
</Note>

## Parameters

<ParamField path="schema" type="WorkspaceSettingsSchema" required>
  The schema built with [`Settings.defineWorkspaceSchema`](./define-workspace-schema), imported
  from your schema file.
</ParamField>

## Returns

An object containing the following form components. Note that settings forms do not include a submit button, as changes are saved automatically.

### Form component

* [`<Form />`](../components/workspace-settings/form) - The form wrapper

### Input components

* [`<AttioUserCombobox />`](../components/workspace-settings/attio-user-combobox) - Select Attio workspace users
* [`<Checkbox />`](../components/workspace-settings/checkbox) - Boolean checkbox input
* [`<Combobox />`](../components/workspace-settings/combobox) - Dropdown selection input
* [`<InputGroup />`](../components/workspace-settings/input-group) - Group multiple inputs together
* [`<NumberInput />`](../components/workspace-settings/number-input) - Numeric input field
* [`<RichTextInput />`](../components/workspace-settings/rich-text-input) - Rich text input field
* [`<TextInput />`](../components/workspace-settings/text-input) - Text input field
* [`<Toggle />`](../components/workspace-settings/toggle) - Boolean toggle switch

### Layout components

* [`<Section />`](../components/workspace-settings/section) - Group form fields into sections

### Utility components

* [`<Button />`](../components/workspace-settings/button) - Action buttons for additional functionality
* [`<WithState />`](../components/workspace-settings/with-state) - Access form state for conditional rendering

## Example

```tsx src/app/settings/page.tsx theme={"system"}
import React from "react"
import {Settings} from "attio/client"

import schema from "./schema"

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

  return (
    <Form>
      <Section title="General Settings">
        <TextInput label="Team name" name="team_name" />
      </Section>

      <Section title="Sync Configuration">
        <Toggle label="Enable automatic sync" name="auto_sync_enabled" />
        <NumberInput label="Sync interval (minutes)" name="sync_interval_minutes" />
      </Section>
    </Form>
  )
})
```