> ## 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.

# <WithState />

> A non-visual component to get form state when rendering JSX

<Note>
  This component is returned by
  [`useWorkspaceSettingsForm()`](../../settings/use-workspace-settings-form).
</Note>

## 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.

```tsx workspace-settings.tsx theme={"system"}
import React from "react"
import {useWorkspaceSettingsForm} from "attio/client"
import type {App} from "attio"

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

function Page() {
  const {Form, Section, Toggle, TextInput, WithState} = 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

<ParamField path="errors" type="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.
</ParamField>

<ParamField path="values" type="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.
</ParamField>

<ParamField path="children" type="({ errors, values }) => React.ReactNode">
  A [render prop](https://react.dev/reference/react/Children#calling-a-render-prop-to-customize-rendering)
  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.
</ParamField>