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().
Unlike with useForm() where validation is defined in the schema, workspace settings validation is specified directly on the input components using props like minLength, maxLength, multiline, and url.

​
Example

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, TextInput } = experimental_useWorkspaceSettingsForm();
	
	return (
		<Form>
			<TextInput 
				label="Display name" 
				name="display_name"
				minLength={3}
				maxLength={50}
			/>
			<TextInput 
				label="Webhook URL" 
				name="webhook_url" 
				type="url"
				url
			/>
			<TextInput 
				label="Description" 
				name="description"
				multiline
				maxLength={500}
			/>
		</Form>
	);
}

​
Props

​
label
string
required
The label of the input field.
​
name
string
required
The path to the string value of the input field in your settings schema.e.g. "display_name", "integration.webhook_url"
​
type
"text" | "email" | "password" | "tel" | "url"
The type of the input field.They roughly correspond to the HTML types text, email, password, tel, and url.Defaults to "text".
Useful on mobile devices with virtual keyboards.
​
placeholder
string
An optional placeholder text for your input.
​
minLength
number
The minimum length (number of characters) required. Validation will fail if the user inputs a string shorter than this value.
​
maxLength
number
The maximum length (number of characters) allowed. Validation will fail if the user inputs a string longer than this value.
​
multiline
boolean
If true, the input will be rendered as a multiline textarea instead of a single-line input.Defaults to false.
​
url
boolean | { protocol?: RegExp; message?: string }
If true, validates that the string is a valid URL with an allowed protocol (default http/https) and a valid top-level domain.You can pass an object with protocol to override the allowed protocol pattern, and message to customize the validation error message.Defaults to false.
​
disabled
boolean
Whether or not the field should be disabled.Defaults to false (not disabled).