# Index field wrapper

<Image src="/assets/img/field-wrappers/index_field_wrapper.jpg" width="1024" height="639" alt="" />

Each field displayed on the <Index /> view is wrapped in this component that regulates the way content is displayed and makes it easy to control some options.

You may use the component `Avo::Index::FieldWrapperComponent` or the helper `index_field_wrapper`.

<Option name="`dash_if_blank`">

This option renders a dash `—` if the content inside responds to true on the `blank?` method.
In the example below, we'd like to show the field as a red checkmark even if the content is `nil`.

#### Default

`true`

```erb
<%= index_field_wrapper **field_wrapper_args, dash_if_blank: false do %>
  <%= render Avo::Fields::Common::BooleanCheckComponent.new checked: @field.value %>
<% end %>
```
</Option>

<Option name="`center_content`">

Wraps the content in a container with `flex items-center justify-center` classes making everything centered horizontally and vertically.

#### Default

`false`

```erb
<%= index_field_wrapper **field_wrapper_args, center_content: true do %>
  <%= render Avo::Fields::Common::BooleanCheckComponent.new checked: @field.value %>
<% end %>
```
</Option>

<Option name="`flush`">

Removes the padding around the field allowing it to flow from edge to edge.

#### Default

`false`

```erb
<%= index_field_wrapper **field_wrapper_args, flush: false do %>
  <%= render Avo::Fields::Common::BooleanCheckComponent.new checked: @field.value %>
<% end %>
```
</Option>

<Option name="`field`">

The instance of the field. It's usually passed in with the `field_wrapper_args`.

```erb
<%= index_field_wrapper **field_wrapper_args do %>
  <%= render Avo::Fields::Common::BooleanCheckComponent.new checked: @field.value %>
<% end %>
```
</Option>

<Option name="`resource`">

The instance of the resource. It's usually passed in with the `field_wrapper_args`.

```erb
<%= index_field_wrapper **field_wrapper_args do %>
  <%= render Avo::Fields::Common::BooleanCheckComponent.new checked: @field.value %>
<% end %>
```
</Option>