How to keep a checkbox and label on the same line in a Rails form?

Question

What should I do to keep the label of a checkbox on the same line with the checkbox in a rails view containing a form?

Currently the label goes on the next line:

<div class="span6 offset3">
<%= form_for(@user) do |f| %>
<%= render 'shared/error_messages', object: f.object %>

  <%= f.label :name %>
  <%= f.text_field :name %>

  <br>
  <%= f.check_box :terms_of_service %>
  <%= f.label :terms_of_service, "I agree to the #{link_to 'Terms of Service', policies_path}.".html_safe %>
  <br><br>

  <%= f.submit "Create my account", :class => "btn btn-large btn-primary" %>
<% end %>

Thank you, Alexandra

I found this link, I think you can apply this into your code. — piam, Sep 19 '12 at 03:58

score 61 · Answer 1 · edited Jul 11 '19 at 18:53

61

According to the bootstrap wiki, it must be

<label class="checkbox">
  <input type="checkbox"> Check me out
</label>

which in Ruby on Rails is

<%= f.label :terms_of_service do %>
  <%= f.check_box :terms_of_service %>
  I agree to the <%= link_to 'Terms of Service', policies_path %>.
<% end %>

edited Jul 11 '19 at 18:53

Dave Powers

1,510
2
23
26

answered May 14 '13 at 08:55

Benoît Legat

888
1
8
9

Same problem here. I followed this to wrap `f.check_box` in `f.label`, and it's now aligned. – Bao Mar 04 '14 at 17:08
thanks! this is what I needed from the above answer where it was stated in a comment that Rails doesn't allow wrapping an input in a label – sixty4bit Dec 02 '14 at 21:15
For other readers. You you want to have the label ***before*** the checkbox, the text will come before `f.check_box` – Anwar Oct 20 '15 at 12:42

score 24 · Accepted Answer · edited Jul 11 '19 at 18:53

24

It looks like you're using Bootstrap, so I recommend adapting your view code to use the horizontal form layout described in this section of the Bootstrap docs: https://getbootstrap.com/docs/4.3/components/forms/#horizontal-form

edited Jul 11 '19 at 18:53

Dave Powers

1,510
2
23
26

answered Sep 19 '12 at 03:22

David Underwood

4,797
1
16
24

48

I ended up using the Bootstrap docs, as David Underwood recommended. Once I added `:class => "checkbox inline"` to my label, the label stayed on the same line with the checkbox. – AndraD Sep 19 '12 at 14:16
6

This comment should be a separate answer. Its better than the accepted answer. – ajbraus Jul 25 '13 at 04:44
1

Yes, this comment is the way to do it in Rails. The bootstrap solution assumes you can wrap a label tag around an input, which rails does not do. The top comment here works – Matt Schwartz Aug 01 '13 at 21:45
3

Every answer here is wrong. The correct code is ` Check me out ` – The Muffin Man Aug 02 '13 at 23:11
3

If anyone's using simple_form to try to accomplish this: `` generates: `I agree ...` – EricC Oct 20 '13 at 13:19
Benoît Legat's answer below is correct. You CAN wrap a form input in a label with Rails. You just have to open a block like this: `` – sixty4bit Dec 02 '14 at 21:16
FYR "checkbox-inline" is the classname not "checkbox inline". Not sure if this is just a ruby translation issue. – Tim Ogilvy Nov 10 '15 at 01:02
@Alexandra you should post `:class => "checkbox inline"` into a separate answer and accept it. This is not a answer. Your comment has more upvotes than most answers here – fubo Aug 16 '17 at 14:54

score 5 · Answer 3 · answered Sep 19 '12 at 04:23

5

 <br>
  <%= f.check_box :terms_of_service, :style => "float:left;" %>
  <%= f.label :terms_of_service, "I agree to the #{link_to 'Terms of Service', policies_path}.".html_safe, :style => "float:left;" %>
  <br>

answered Sep 19 '12 at 04:23

jainvikram444

5,136
1
14
29

= f.input :income, :label => "Income?", :input_html => {:style => "float:left"} – Eskim0 Jul 30 '13 at 19:10

score 5 · Answer 4 · answered Aug 02 '13 at 22:20

The comment on the answer is correct, but it assumes some nuance of understanding about order of elements.

The correct answer is as follows:

<%= f.check_box :terms_of_service %>
<%= f.label :terms_of_service, "I agree to the #{link_to 'Terms of Service', policies_path}.".html_safe
                             , {class: "checkbox inline"} %>

Two things are necessary:

The class on the label element
The checkbox element has to be before the label element.

This is obvious once you see it working, but all the other samples for form_for always have the inputs after the labels and you need to change that up for checkbox.

score 3 · Answer 5 · answered Feb 15 '16 at 00:31

3

  <div class="form-inline">
    <%= f.check_box :subscribed, class: 'form-control' %>
    <%= f.label :subscribed, "Subscribe" %>
  </div>

answered Feb 15 '16 at 00:31

Still Learning

39
1

2

Welcome to StackOverflow! Please try to add a sentence or two when providing an answer. Best regards – manniL Feb 15 '16 at 00:45

score 2 · Answer 6 · answered Sep 19 '12 at 03:26

i had a similar problem the other day, im using twitter bootsrap, but im also using the simple_form gem. i had to fix that detail through css, here is my code:

<%=f.input :status, :label => "Disponible?",  :as => :boolean, :label_html => { :class => "pull-left dispo" }%>

css:

.dispo{
    margin-right:10%;
}
pull-left{
    float:left;
}

score 2 · Answer 7 · answered Feb 10 '14 at 14:15

2

To keep the i18n using of label, you can use t:

<%= f.label :my_field do %>
  <%= f.check_box :my_field %> <%= t 'activerecord.attributes.my_model.my_field' %>
<% end %>

answered Feb 10 '14 at 14:15

Sidhannowe

455
5
11

score 2 · Answer 8 · answered Dec 06 '16 at 16:50

I would wrap the check box inside the label.

  <%= f.label :terms_of_service do %>
    <%= f.check_box :terms_of_service %>
    I agree to the <%= link_to 'Terms of Service', policies_path %>
  <% end %>

When the input field is wrapped by it's label, you actually don't need the for attribute on the label. The label will activate the check box without it on click. So even simpler:

  <label>
    <%= f.check_box :terms_of_service %>
    I agree to the <%= link_to 'Terms of Service', policies_path %>
  </label>

Generically for Rails, this could be a way to go about it (human_attribute_name works with i18n):

<label>
  <%= f.check_box :terms_of_service %>
  <%= User.human_attribute_name(:terms_of_service) %>
</label>

score 1 · Answer 9 · answered Nov 16 '16 at 04:33

1

for basic rails tags:

<%= label_tag('retry-all') do %>
  Retry All
  <= check_box_tag("retry-all",false) %>
<% end %>

answered Nov 16 '16 at 04:33

Blair Anderson

17,040
7
64
96

score 0 · Answer 10 · answered Sep 19 '12 at 10:35

0

Do you use bootstrap? Easy way to do is add :class => "span1" in f.submit. I'm sure it worked!

answered Sep 19 '12 at 10:35

duykhoa

2,180
1
22
35

score 0 · Answer 11 · edited Jul 11 '19 at 19:28

For Bootstrap 4, in HAML

  .form-check
    =f.label :decision_maker, class: 'form-check-label' do
      =f.check_box :decision_maker, class: 'form-check-input'
      Decision Maker

or

  .form-group
    =f.check_box :decision_maker
    =f.label :decision_maker

https://getbootstrap.com/docs/4.3/components/forms/#default-stacked

<div class="form-check"> <label class="form-check-label"> <input class="form-check-input" type="checkbox" value=""> Option one is this and that—be sure to include why it's great </label> </div>

The first way is the more correct way, but the second way looks virtually identical and DRYer.

score 0 · Answer 12 · answered Aug 02 '18 at 20:17

0

<div class="row"> 
  <div class="col-sm-1">
    <%= f.label :paid? %>
  </div>
  <div class="col-sm-1">
    <%= f.check_box :paid, value: 'false'  %>
  </div>
</div>

answered Aug 02 '18 at 20:17

Jim

1

1

You need to add a comment or description to your answer – Michael Aug 02 '18 at 20:47

score 0 · Answer 13 · answered Jul 22 '19 at 19:11

0

On Rails 5.2, ruby 2.4 and bootstrap 4.1.1:

<%= form.check_box :terms_of_service, label: "your custom label...."%>

worked for me without having to indicate inline checkbox.

answered Jul 22 '19 at 19:11

tomb

1,261
11
21

score -2 · Answer 14 · answered Aug 09 '16 at 07:54

-2

I use pure css/html and this css works good for me.

 input {
    float:left;
    width:auto;
}
label{
    display:inline;
}

answered Aug 09 '16 at 07:54

William Hu

12,918
8
85
98

How to keep a checkbox and label on the same line in a Rails form?

14 Answers14

Linked