Nest Input Inside F.label ( Rails Form Generation )

May 31, 2023 Post a Comment

I want to use the f.label method to create my form element labels, however - i want to have the form element nested inside the label. Is this possible? -- From W3C -- To associate

Solution 1:

You can nest your form helper inside of a label using a block. Here is an example using HAML, but it also works with ERB.

= form_for your_resource do|f|
  = f.label :first_namedo
    = f.text_field :first_name

Solution 2:

As Dan Garland above mentioned previously, you can definitely nest inputs inside labels with a simple block. I'm providing this answer as an example using ERB and specifically to show exactly how you have to get Bootstrap button groups to work like radio buttons as they require this nesting. It took me a while to figure out, so hopefully this will help someone else.

For this example (Rails 4.2), the button group lets a user select between 3 different distance options:

<%= form_for(@location) do |f| %>
  <div class="field form-group">
    <%= f.label :distance %><br>
    <div class="btn-group" data-toggle="buttons">
      <%= f.label :distance, class: "btn btn-primary active"do %>
        <%= f.radio_button :distance, 0.3, checked: true %>
        0.3 miles
      <% end %>
      <%= f.label :distance, class: "btn btn-primary"do %>
        <%= f.radio_button :distance, 0.5 %>
        0.5 miles
      <% end %>
      <%= f.label :distance, class: "btn btn-primary"do %>
        <%= f.radio_button :distance, 1 %>
        1 mile
      <% end %>
    </div>
  </div>
  <div class="actions">
    <%= f.submit "Submit Location", class: "btn btn-success" %>
  </div>
<% end %>

P.S. I can't yet post screenshots to show what this looks like, but once I get enough rep points, I will.

Solution 3:

You can use a custom FormBuilder to allow the label helper to accept a block. It's as simple as this:

classSmartLabelFormBuilder < ActionView::Helpers::FormBuilderdeflabel(method, content_or_options_with_block = nil, options = {}, &block)if !block_given?
      super(method, content_or_options_with_block, options)
    else
      options = content_or_options_with_block.is_a?(Hash) ? content_or_options_with_block.stringify_keys : {}

      @template.content_tag(:label, options, &block)
    endendend

Then you can use your form builder like this:

<% form_for(@article, :builder => SmartLabelFormBuilder) do|form| %>
  <% form.label(:title) do %>
    Title
    <%= form.text_field(:title) %>
  <% end %>
<% end %>

Solution 4:

Use this little workaround

<%= f.label(:content, "#{f.check_box(:allow_posts)}\n#{:content}\n".html_safe, :class => "checkbox") %>

will give you this

<label class="checkbox"for="pages_content"><input name="pages[allow_posts]"type="hidden" value="0"><inputid="pages_allow_posts" name="pages[allow_posts]"type="checkbox" value="1">

content

Solution 5:

This isn't possible using the built-in Rails' label or label_tag helpers because they don't take a block. However, if you want nesting then why wouldn't you just use the HTML element directly?—

<label>
  <%= f.text_field :firstname %>
</label>

Html5 Tech