Skip to main content
The Workspace Settings API is experimental and may change in the future. Please don’t use it in production versions of your app.
This component is returned by experimental_useWorkspaceSettingsForm().

​
Example: Conditional fields

<WithState /> allows you to access the current settings values via render props in the JSX, so you can conditionally render fields based on other settings.
workspace-settings.tsx
import React from "react";
import { experimental_useWorkspaceSettingsForm } from "attio/client";
import type { App } from "attio";

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

function Page() {
	const { Form, Section, Toggle, TextInput, WithState } = experimental_useWorkspaceSettingsForm();
	
	return (
		<Form>
			<Section title="API Configuration">
				<Toggle label="Use custom endpoint" name="use_custom_endpoint" />
				<WithState values>
					{({ values }) =>
						values.use_custom_endpoint ? (
							<TextInput 
								label="Custom API endpoint" 
								name="custom_api_endpoint"
								type="url"
								url
							/>
						) : null
					}
				</WithState>
			</Section>
		</Form>
	);
}

​
Props

​
errors
boolean
Whether or not to request the form validation errors.Defaults to false.If true, the errors will be passed to the children render prop.
​
values
boolean
Whether or not to request the current settings values.Defaults to false.If true, the values will be passed to the children render prop.
​
children
({ errors, values }) => React.ReactNode
A render prop that receives the requested form state.

​
errors? : Object

An object of form validation errors in the same shape as your settings values.

​
values? : Object

The current values of your workspace settings.