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

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, RadioGroup} = experimental_useWorkspaceSettingsForm()

  return (
    <Form>
      <RadioGroup name="sync_frequency">
        <RadioGroup.Item value="hourly" label="Hourly" />
        <RadioGroup.Item value="daily" label="Daily" />
        <RadioGroup.Item value="weekly" label="Weekly" />
      </RadioGroup>
    </Form>
  )
}

Adding a legend

To add a legend to your radio group, wrap it in a <Fieldset />:
<Fieldset legend="Sync frequency">
  <RadioGroup name="sync_frequency">
    <RadioGroup.Item value="hourly" label="Hourly" />
    <RadioGroup.Item value="daily" label="Daily" />
  </RadioGroup>
</Fieldset>

Props

name
string
required
The path to the string value of the radio group field in your settings schema.e.g. "sync_frequency", "notifications.method"
disabled
boolean
Whether or not the radio group should be disabled.Defaults to false (not disabled).
children
React.ReactNode
required
The <RadioGroup.Item />s representing the available options.
A <RadioGroup /> component should only have <RadioGroup.Item />s as children.

<RadioGroup.Item />

A radio group item representing a single selectable option.

Props

value
string
required
The value of the radio item that will be stored in the settings when selected.
label
string
required
The label displayed next to the radio item.