# app/components/avo/fields/color_picker_field/show_component.html.erb

<%= show_field_wrapper field: @field, index: @index do %>
  <div data-controller="hidden-input">
    <% unless @field.always_show %>
      <%= link_to t('avo.show_content'), 'javascript:void(0);', class: 'font-bold inline-block', data: { action: 'click->hidden-input#showContent' } %>
    <% end %>
    <div <% unless @field.always_show %> class="hidden" <% end %> data-hidden-input-target="content">
      <div style="background-color: <%= @field.value %>"
        class="h-6 px-1 rounded-md text-white text-sm flex items-center justify-center leading-none"
      >
        <%= @field.value %>
      </div>
    </div>
  </div>
<% end %>
```

<Image src="/assets/img/stimulus/hidden_input_color.gif" width="1000" height="76" alt="Hidden input controller" />

### Non existing model field

To ensure proper rendering of a custom field that lacks getters and setters at the model level, you must implement these methods within the model.

```ruby
  def custom_field
  end

  def custom_field=(value)
  end
```

---