> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/dynamic-components/components/field.md).

# Field

The Avonni Field component displays or edits a single Salesforce record field, automatically resolving the field's label, type, and picklist values from the object metadata. Bind it to a record variable field and it renders the right input for that field's type.

## Overview

Rather than hardcoding an input, the Field component reads the underlying Salesforce field and renders the appropriate control — text, number, date, checkbox, picklist, and so on — with the field's own label. The entered value is coerced to match the field type, so the value you get back is always valid for that field. Use it to build compact, metadata-driven forms where each field stays in sync with its object definition.

## Configuration

To configure the Field, select it on the canvas. The **Edit Field** panel opens on the right with three tabs: **Properties**, **Interactions**, and **Style**. The sections below mirror the Properties tab.

### Properties

**Value** binds the component to a record variable field to display. The value is coerced to match the underlying Salesforce field type (number, boolean, date, and so on).

**Custom Label** overrides the field label derived from the object metadata. Leave it blank to use the object's own field label.

**Variant** changes the appearance of the field. Options are **Standard** (default), **Label Hidden**, **Label Inline**, and **Label Stacked**.

**Read Only** displays the field value without allowing edits.

**Edit Mode** controls how editing works when the field is editable. Choose **Input** (default) to render a standard input, or **Inline** to show the value as read-only with a pencil button that activates an editable input on click. Requires **Read Only** = disabled.

### Set Component Visibility

All components support conditional visibility — see [Component Visibility](/dynamic-components/core-concepts/component-visibility.md).

## Interactions

[Interactions](/dynamic-components/component-builder/interactions.md) define what happens when users interact with the Field. Configure them from the **Interactions** tab of the Edit Field panel.

### Change

Fires when the field value changes and passes validation. Use it to update related records, recompute other fields, or drive conditional visibility elsewhere on the page.

## Styling

Configure the Field's appearance from the **Style** tab of the Edit Field panel.

{% tabs %}
{% tab title="Margin" %}
Controls the *outer* spacing around the component.

* **Top / Right / Bottom / Left:** Adjust the space on each side.
  {% endtab %}

{% tab title="Padding" %}
Controls the *inner* spacing between the component's content and its border.

* **Top / Right / Bottom / Left:** Adjust the inner spacing on each side.
  {% endtab %}

{% tab title="Size" %}
Controls the component's dimensions.

* **Width / Height:** Set fixed dimensions.
  {% endtab %}

{% tab title="Border" %}
Customizes the border surrounding the component.

* **Color / Size / Style / Radius:** Set the border color, thickness, style, and corner rounding.
  {% endtab %}
  {% endtabs %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/dynamic-components/components/field.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.