---
title: "FormField Components"
description: "Learn about FormField components."
url: https://docs.sentry.io/integrations/integration-platform/ui-components/formfield/
---

# FormField Components

The [issue linking](https://docs.sentry.io/integrations/integration-platform/ui-components/issue-link.md) and [alert rule action](https://docs.sentry.io/integrations/integration-platform/ui-components/alert-rule-action.md) UI components can use `FormField` components to display attributes in their respective modals. These components can render custom forms with inputs specified according to the schemes below. They behave similarly to their HTML equivalents.

## [Text](https://docs.sentry.io/integrations/integration-platform/ui-components/formfield.md#text)

### [Schema](https://docs.sentry.io/integrations/integration-platform/ui-components/formfield.md#schema)

```json
{
  "type": "text",
  "label": <String>,
  "name": <String>,
  "default": <String>,
}
```

### [Attributes](https://docs.sentry.io/integrations/integration-platform/ui-components/formfield.md#attributes)

* `label` - (Required) Label text to be rendered for the form field

* `name` - (Required) Value to use in `name` attribute of the field

* `default` - default to pre-populate with. Options include `issue.title` and `issue.description`. Only used for [issue link](https://docs.sentry.io/integrations/integration-platform/ui-components/issue-link.md) components.

  * `issue.title` - title of the Sentry issue
  * `issue.description` - description of the Sentry issue

## [Textarea](https://docs.sentry.io/integrations/integration-platform/ui-components/formfield.md#textarea)

### [Schema](https://docs.sentry.io/integrations/integration-platform/ui-components/formfield.md#schema-1)

```json
{
  "type": "textarea",
  "label": <String>,
  "name": <String>,
  "default": <String>,
}
```

### [Attributes](https://docs.sentry.io/integrations/integration-platform/ui-components/formfield.md#attributes-1)

* `label` - (Required) Label text to be rendered for the form field

* `name` - (Required) Value to use in `name` attribute of the field

* `default` - default to pre-populate with options include `issue.title` and `issue.description`. Only used for [issue link](https://docs.sentry.io/integrations/integration-platform/ui-components/issue-link.md) components.

  * `issue.title` - title of the Sentry issue
  * `issue.description` - description of the Sentry issue

## [Select](https://docs.sentry.io/integrations/integration-platform/ui-components/formfield.md#select)

### [Schema](https://docs.sentry.io/integrations/integration-platform/ui-components/formfield.md#schema-2)

```json
{
  "type": "select",
  "label": <String>,
  "name": <String>,
  "uri": <URI>,
  "async": <Boolean>,
  "options": <Array<Array<String, String>>>,
  "multiple": <Boolean>,
  "depends_on": <Array<String>>,
  "skip_load_on_open": <Boolean>
}
```

### [Attributes](https://docs.sentry.io/integrations/integration-platform/ui-components/formfield.md#attributes-2)

* `label` - (Required) Label text to be rendered for the form field
* `name` - (Required) Value to use in `name` attribute of the field
* `uri` - (Required if developer doesn't provide `options`) URI to retrieve values from. Check out our [URI Guidelines](https://docs.sentry.io/integrations/integration-platform/ui-components.md#uri-guidelines) documentation for formatting help.
* `async` - (Optional) Used only if `uri` is present. If true (default), will query the URI as the user types, for autocomplete suggestions (see response format below). If false, will query the URI once initially to retrieve all possible options. This request *must* succeed, and the response *must* return data in the format Sentry expects, otherwise the entire component won't render.
* `options` - (Required if developer doesn't provide `uri`) Static list of options in the format of `[["value1", "label1"], ["value2", "label2"]]`
* `multiple` - (Optional) If true, allows users to select more than one option. The field in the request webhook will be a list of strings. Defaults to false.
* `depends_on` - (Optional) If a field value depends on the value of another field, a request will be made to load those options when the dependent field is set.
* `skip_load_on_open` (Optional) If true, this field will not load options when the page loads. Instead, it will wait for the user to start typing before fetching options.

### [URI Request Format](https://docs.sentry.io/integrations/integration-platform/ui-components/formfield.md#uri-request-format)

The request sent to the `uri` to load options is a `GET` request. The parameters are encoded into the query parameters like so:

```json
{
  "installationId": <String>,
  "projectSlug": <String>,
  "query": <String>,
  "dependentData": <String>,
}
```

* `installationId` - The ID of the installation associated with the request
* `projectSlug` - The slug of the project in Sentry
* `query` - The search term the user is typing
* `dependentData` - A JSON encoded string of the dependent data if that field has `depends_on` set

### [URI Response Format](https://docs.sentry.io/integrations/integration-platform/ui-components/formfield.md#uri-response-format)

Response from `uri`, when specified, must be JSON and match the following format:

```json
[
  {
    "label": <String>,
    "value": <String>,
    "default": <Boolean>,
  },
  ...
]
```

## [Surfacing Errors](https://docs.sentry.io/integrations/integration-platform/ui-components/formfield.md#surfacing-errors)

When a request to your service fails, you can show the user a specific error message in [sentry.io](https://sentry.io) by responding with a JSON body in this shape:

```json
{ "message": "Channel no longer exists!" }
```

Sentry forwards your service's status code and shows the `message` from the response body. If you return an error status without a `message`, the user sees a generic error message. If your service doesn't respond at all (for example, the request times out), Sentry returns a `502`. In all cases, the user's action won't complete until the request succeeds.