> ## Documentation Index
> Fetch the complete documentation index at: https://docs.tight.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Transaction Form

> Create and edit individual bank transactions

## Overview

Tight's Transaction Form Embedded experience makes it easy for you to direct a user or accountant to a specific transaction for review. This serves as a simple way to have your users or their accountant interact with and update their transactions in the Tight API.

## Embedding the Transaction Form

To initialize the Tight Embedded experience in your React project, follow the instructions on [Embedding Tight's white-labeled UI](/embeddable-ui/react/patterns/embedding).

Below is an example embedding of the Transaction Form:

```TSX Form.tsx theme={null}
import { TransactionForm, Tight } from "@tight-embedded/react";
import "@tight-embedded/react/index.css";

function Form({ accessToken }) {
    return (
      <Tight environment="SANDBOX" accessToken={accessToken} >
        <TransactionForm id={"btxn_12345"} />
      </Tight>
    )
}
```

## Props

<ParamField body={"id"} type={"string"} post={["required"]}>
  The `bankTransaction.id` that belongs to the form you would like to render. The form will automatically render
  the correct fields for the bank transaction.
</ParamField>

<ParamField body={"onClose"} type={"function"} post={["required"]}>
  The `onClose` function is called anytime the user closes the form.
  This indicates that the `<TransactionForm>` can safely be removed from the component tree.

  <Expandable title={"arguments"}>
    <ParamField body={"data"} type={"object"}>
      The result of a successful form submission. Empty when the `error` argument is non-null.
    </ParamField>

    <ParamField body={"error"} type={"object"}>
      An object populated with the error details of an unsuccessful form submission. `null` when `data` is not empty.
    </ParamField>
  </Expandable>
</ParamField>