> ## 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 [`useForm()`](../../forms/use-form).</Note>

## Example: Conditional fields

`<WithState />` allows you to access the form values via render props
in the JSX, so you can conditionally render fields.

```tsx conditional-fields-dialog.tsx theme={"system"}
import React from "react"
import {Forms, useForm, showToast} from "attio/client"

export function HelloWorldDialog() {
  const {Form, SubmitButton, Checkbox, TextInput, WithState} = useForm(
    {
      requireName: Forms.boolean(),
      name: Forms.string(),
    },
    {
      requireName: false,
      name: "",
    },
  )
  return (
    <Form
      onSubmit={async (values) => {
        await showToast({
          title: "Form submitted",
          variant: "success",
          text: JSON.stringify(values),
        })
      }}
    >
      <Checkbox label="Require name" name="requireName" />
      <WithState values>
        {({values}) => (values.requireName ? <TextInput label="Name" name="name" /> : <></>)}
      </WithState>
      <SubmitButton label="Submit" />
    </Form>
  )
}
```

## Example: Submitting state

`<WithState />` allows you to know whether or not the form is currently being
submitted, so you can change the UI, e.g. disabling a secondary button.

```tsx submitting-state-dialog.tsx theme={"system"}
import React from "react"
import {Forms, useForm, showToast, Button} from "attio/client"

export function SubmittingStateDialog() {
  const {Form, SubmitButton, TextInput, WithState} = useForm(
    {
      name: Forms.string(),
    },
    {
      name: "",
    },
  )
  return (
    <Form
      onSubmit={async (values) => {
        await new Promise((resolve) => setTimeout(resolve, 2_000))
        await showToast({
          title: "Form submitted",
          variant: "success",
          text: JSON.stringify(values),
        })
      }}
    >
      <TextInput label="Name" name="name" />

      <WithState submitting>
        {({submitting}) => (
          <Button
            label="Remove"
            variant="destructive"
            disabled={submitting}
            onClick={() => {
              // do something
            }}
          />
        )}
      </WithState>
      <SubmitButton label="Submit" />
    </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="submitting" type="boolean">
  Whether or not to request whether the form is currently being submitted.

  Defaults to `false`.

  If `true`, the `submitting` will be passed to the `children` render prop.
</ParamField>

<ParamField path="values" type="boolean">
  Whether or not to request the form values.

  Defaults to `false`.

  If `true`, the `values` will be passed to the `children` render prop.
</ParamField>

<ParamField path="children" type="({ errors, submitting, 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 form values.

  #### `submitting? : boolean`

  `true` until the `Promise` resolves from `onSubmit`, `false` otherwise.

  #### `values? : Object`

  The current values of your form.
</ParamField>