Nest input inside f.label ( rails form generation )

Question

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

Answer 1

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"><input id="pages_allow_posts" name="pages[allow_posts]" type="checkbox" value="1">

content

Answer 2

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_name do
    = f.text_field :first_name

Answer 3

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>

Answer 4

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

class SmartLabelFormBuilder < ActionView::Helpers::FormBuilder
  def label(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)
    end
  end
end

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

Answer 5

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.