# Show & Edit field wrapper

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

The <Show /> and <Edit /> field wrappers are actually the same component.

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

## Field wrapper areas

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

Each field wrapper is divided in three areas.

### Label

This is where the field name is being displayed. This is also where the required asterisk is added for required fields.

### Value

This area holds the actual value of the field or it's representation. The falue can be simple text or more advanced types like images, advanced pickers, and content editors.

At the bottom the help text is going to be shown on the <Edit /> view and below it the validation error.

### Extra

This space is rarely used and it's there just to fill some horizontal space so the content doesn't span to the whole width and maintain its readability. With the introduction of the sidebar, this space will be ignored

## Options

<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
<%= field_wrapper **field_wrapper_args, dash_if_blank: false do %>
  <%= render Avo::Fields::Common::BooleanCheckComponent.new checked: @field.value %>
<% end %>
```
</Option>

<Option name="`compact`">

This renders the field in a more compact way by removing the **Extra** area and decresing the width of the **Label** and **Content** areas.

This is enabled on the fields displayed in actions.

#### Default

`false`

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

<Option name="`data`">

Pass in some data attributes. Perhaps you would like to attach a StimulusJS controller to this field.

```erb
<%= field_wrapper **field_wrapper_args, data: {controller: "boolean-check"} do %>
  <%= render Avo::Fields::Common::BooleanCheckComponent.new checked: @field.value %>
<% end %>
```
</Option>

<Option name="`full_width`">

This removes the **Extra** area and renders the **Value** area full width.

This is used on fields that require a larger area to be displayed like WYSIWYG editors, `KeyValue`, or file fields.

#### Default

`false`

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

<Option name="`form`">

The instance of the form that is going to be populated. It's usually passed in with the `field_wrapper_args` on the <Edit /> view.

```erb
<%= field_wrapper **field_wrapper_args 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
<%= field_wrapper **field_wrapper_args do %>
  <%= render Avo::Fields::Common::BooleanCheckComponent.new checked: @field.value %>
<% end %>
```
</Option>

<Option name="`help`">

The text that is going to be displayed below the actual field on the <Edit /> view.

```erb
<%= field_wrapper **field_wrapper_args, help: "Specify if the post is published or not." do %>
  <%= render Avo::Fields::Common::BooleanCheckComponent.new checked: @field.value %>
<% end %>
```
</Option>

<Option name="`label`">

The text that is going to be displayed in the **Label** area. You might want to override it.

```erb
<%= field_wrapper **field_wrapper_args, label: "Post is published" 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
<%= field_wrapper **field_wrapper_args do %>
  <%= render Avo::Fields::Common::BooleanCheckComponent.new checked: @field.value %>
<% end %>
```
</Option>

<Option name="`stacked`">

Display the field in a column layout with the label on top of the value

```erb
<%= field_wrapper **field_wrapper_args, style: "background: red" do %>
  <%= render Avo::Fields::Common::BooleanCheckComponent.new checked: @field.value %>
<% end %>
```
</Option>

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

<Option name="`style`">

The you might want to pass some styles to the wrapper to change it's looks.

```erb
<%= field_wrapper **field_wrapper_args, style: "background: red" do %>
  <%= render Avo::Fields::Common::BooleanCheckComponent.new checked: @field.value %>
<% end %>
```
</Option>

<Option name="`view`">

The view where the field is diplayed so it knows if it's a <Show /> or <Edit /> view. It's usually passed in with the `field_wrapper_args`.

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

---