Click here to see a newer version of these docs.

# Stimulus controllers

Avo ships with a few Stimulus controllers that helps you build your admin.

# Hidden input controller

This controller allows you to hide your content and add a trigger to show it. You'll find it in the Trix field.

Hidden input controller

You should add the :always_show attr_reader and @always_show instance variable to your field.



 




 




# app/avo/fields/color_picker_field.rb
class ColorPickerField < Avo::Fields::BaseField
  attr_reader :always_show

  def initialize(id, **args, &block)
    super(id, **args, &block)

    @always_show = args[:always_show] || false
    @allow_non_colors = args[:allow_non_colors]
  end
end

  
        Copied!

Next in your fields Show component you need to do a few things.

  1. Wrap the field inside a controller tag
  2. Add the trigger that will show the content.
  3. Wrap the value in a div with the hidden class applied if the condition @field.always_show is false.
  4. Add the content target (data-hidden-input-target="content") to that div.



 
 
 
 
 









# 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 %>

  
        Copied!
Hidden input controller
← FAQ →