# for gravatar field
field :email, as: :gravatar, link_to_record: true
```

<Image src="/assets/img/fields-reference/as-link-to-resource.jpg" width="694" height="166" alt="As link to resource" />

You can add this property on `id`, `text`, and `gravatar` fields.

Optionally you can enable the global config `id_links_to_resource`. More on that on the id links to resource docs page.

**Related:**
 - ID links to resource
 - Resource controls on the left side

## Align text on Index view

It's customary on tables to align numbers to the right. You can do that using the `html` option.

```ruby{2}
class Avo::Resources::Project < Avo::BaseResource
  field :users_required, as: :number, html: {index: {wrapper: {classes: "text-right"}}}
end
```

<Image src="/assets/img/fields/index_text_align.jpg" width="632" height="476" alt="Index text align" />

## Stacked layout

For some fields, it might make more sense to use all of the horizontal area to display it. You can do that by changing the layout of the field wrapper using the `stacked` option.

```ruby
field :meta, as: :key_value, stacked: true
```

#### `inline` layout (default)

<Image src="/assets/img/fields/field_wrapper_layout_inline.jpg" width="808" height="117" alt="" />

#### `stacked` layout

<Image src="/assets/img/fields/field_wrapper_layout_stacked.jpg" width="815" height="179" alt="" />

## Global `stacked` layout

You may also set all the fields to follow the `stacked` layout by changing the `field_wrapper_layout` initializer option from `:inline` (default) to `:stacked`.

```ruby
Avo.configure do |config|
  config.field_wrapper_layout = :stacked
end
```

Now, all fields will have the stacked layout throughout your app.

## Field options

<Option name="`components`">

The field's `components` option allows you to customize the view components used for rendering the field in all, `index`, `show` and `edit` views. This provides you with a high degree of flexibility.

### Ejecting the field components
To start customizing the field components, you can eject one or multiple field components using the `avo:eject` command. Ejecting a field component generates the necessary files for customization. Here's how you can use the `avo:eject` command:

#### Ejecting All Components for a Field

`$ rails g avo:eject --field-components FIELD_TYPE --scope admin`

Replace `FIELD_TYPE` with the desired field type. For instance, to eject components for a Text field, use:

`$ rails g avo:eject --field-components text --scope admin`

This command will generate the files for all the index, edit and show components of the Text field, for each field type the amount of components may vary.

For more advanced usage check the eject documentation.

:::warning Scope
If you don't pass a `--scope` when ejecting a field view component, the ejected component will override the default components all over the project.

Check eject documentation for more details.
:::

### Customizing field components using `components` option

Here's some examples of how to use the `components` option in a field definition:

::: code-group
```ruby [Hash]
field :description,
  as: :text,
  components: {
    index_component: Avo::Fields::Admin::TextField::IndexComponent,
    show_component: Avo::Fields::Admin::TextField::ShowComponent,
    edit_component: "Avo::Fields::Admin::TextField::EditComponent"
  }
```

```ruby [Block]
field :description,
  as: :text,
  components: -> do
    {
      show_component: Avo::Fields::Admin::TextField::ShowComponent,
      edit_component: "Avo::Fields::Admin::TextField::EditComponent"
    }
  end
```
:::

The components block it's executed using `Avo::ExecutionContent` and gives access to a bunch of variables as: `resource`, `record`, `view`, `params` and more.

`<view>_component` is the key used to render the field's `<view>`'s component, replace `<view>` with one of the views in order to customize a component per each view.

:::warning Initializer
It's important to keep the initializer on your custom components as the original field view component initializer.
:::

</Option>

<Option name="`html`">

### Attach HTML attributes

Using the `html` option you can attach `style`, `classes`, and `data` attributes. The `style` attribute adds the `style` tag to your element, `classes` adds the `class` tag, and the `data` attribute the `data` tag to the element you choose.

You may find more detailed information about the HTML attributes here.

</Option>

<Option name="`summarizable`">

<Image src="/assets/img/summarizable.png" width="554" height="347" alt="Field summarizable preview" />

The `summarizable` option allows you to generate a visual summary of a column's data distribution. This feature provides a quick and intuitive overview of your dataset by displaying a chart within the table header.

You can enable `summarizable` for a column like this:

```ruby
def fields
  field :status, as: :select, summarizable: true
  field :status, as: :badge, summarizable: true
end
```

### How It Works

When `summarizable` is enabled, a chart icon will appear in the table header for that column.
Clicking on the icon will display a summary chart based on the data in that column.
The chart provides a visual representation of data distribution, making it easier to analyze trends.

</Option>

<Option name="`for_attribute`">

Allows to specify the target attribute on the model for each field. By default the target attribute is the field's id.

Usage example:

```ruby
field :status, as: :select, options: [:one, :two, :three], only_on: :forms

field :secondary_field_for_status,
  as: :badge,
  for_attribute: :status,
  options: {info: :one, :success: :two, warning: :three},
  except_on: :forms,
  help: "Secondary field for status using the for_attribute option"
```
</Option>

<Option name="`meta`">

This handy option enables you to send arbitrary information to the field. It's especially useful when you're building your own custom fields or you are using [custom components](#components) for the built-in fields.

Usage example:

```ruby{4,9-11}