Skip to main content
The experimental_useWorkspaceSettingsForm() hook creates a form for configuring workspace-level settings for your app. Unlike regular forms created with useForm(), workspace settings forms automatically save changes and don’t require an onSubmit handler.
Only workspace admins can edit workspace settings. However, all workspace members can view the settings.
The Workspace Settings API is experimental and may change in the future. Please don’t use it in production versions of your app.

​
Parameters

This hook takes no parameters. The schema is inferred globally based on your workspace settings configuration defined in app.settings.ts.

​
Returns

an object containing:

​
Components

The hook returns the following form components. Note that settings forms do not include a submit button, as changes are saved automatically.

​
Form Component

​
Input Components

​
Layout Components

​
Utility Components

  • <Button /> - Action buttons for additional functionality
  • <WithState /> - Access form state for conditional rendering

​
Example

workspace-settings.tsx
import React from "react";
import { experimental_useWorkspaceSettingsForm, Section } from "attio/client";
import type { App } from "attio";

export const workspaceSettings: App.Settings.Workspace = {
  Page,
};

function Page() {
  const { Form, TextInput, Toggle, NumberInput } = experimental_useWorkspaceSettingsForm();
  
  return (
    <Form>
      <Section title="General Settings">
        <TextInput label="Display name" name="display_name" />
        <TextInput label="Environment" name="environment" />
      </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>
  );
}