title: Overriding Play 2.1 Checkbox Form Helper for Twitter Bootstrap
body: <p>I want to show an HTML checkbox followed by the label to the right.</p>
  
  <p>I followed <a href="https://stackoverflow.com/questions/10206961/is-it-possible-to-override-form-helpers">Pere Villega's suggestion</a>, and modified the Play 2.1-SNAPSHOT version of <code>views.helper.checkbox.scala</code> as<code>views.helper.twitterCheckbox.scala</code>. My project uses the version of Twitter Bootstrap provided by <a href="http://www.jamesward.com/2012/04/25/introducing-webjars-web-libraries-as-managed-dependencies" rel="nofollow noreferrer">Webjars</a>:</p>
  
  <pre><code>@**
   * Generate an HTML input checkbox for Twitter Bootstrap.
   *
   * Example:
   * {{{
   * @checkbox(field = myForm("done"))
   * }}}
   *
   * @param field The form field.
   * @param args Set of extra HTML attributes ('''id''' and '''label''' are 2 special arguments).
   * @param handler The field constructor.
   *@
  @(field: play.api.data.Field, args: (Symbol,Any)*)(implicit handler: FieldConstructor, lang: play.api.i18n.Lang)
  
  @boxValue = @{ args.toMap.get('value).getOrElse("true") }
  
  @input(field, args:_*) { (id, name, value, htmlArgs) =&gt;
    &lt;label class="checkbox"&gt;
      &lt;input type="checkbox" name="@name" value="@boxValue" @(
        if(value == Some(boxValue)) "checked" else "") @toHtmlArgs(htmlArgs.filterKeys(_ == 'value)) /&gt;
      @args.toMap.get('_text)
    &lt;/label&gt;
  }
  </code></pre>
  
  <p>I used the form helper like this:</p>
  
  <pre><code>@import helper._
  @form(action = courseName.map(routes.CoursesController.update(_)).getOrElse(routes.CoursesController.save()),
                 args = 'class -&gt; "form-horizontal") {
    &lt;div class="span3"&gt;
      &lt;p&gt;&lt;b&gt;@{if (allCourses.size&gt;0) "" else "No "}Prerequisite Courses&lt;/b&gt;&lt;/p&gt;
      &lt;div class="control-group"&gt;
        &lt;div class="controls"&gt;
          @allCourses.map { course =&gt;
            @twitterCheckbox(field = editCourseForm(course.name))
          }
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  }
  </code></pre>
  
  <p>But I get output like this, which causes the checkbox to be on a different line then the label. The output has been formatted for readability - note the <code>dl</code> and <code>dd</code> tags:</p>
  
  <pre><code>&lt;form action="/courses/admin" method="POST" class="form-horizontal"&gt;
  &lt;div class="span3"&gt;
    &lt;p&gt;&lt;b&gt;Prerequisite Courses&lt;/b&gt;&lt;/p&gt;
    &lt;div class="control-group"&gt;
      &lt;div class="controls"&gt;
        &lt;dl class=" " id="skus_field"&gt;
          &lt;dt&gt;&lt;label for="skus"&gt;skus&lt;/label&gt;&lt;/dt&gt;
          &lt;dd&gt;
            &lt;label class="checkbox"&gt;
              &lt;input type="checkbox" name="skus" value="true"   /&gt;
            &lt;/label&gt;
          &lt;/dd&gt;
         &lt;/dl&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Seems like there is some sort of implicit behavior I am unaware of. How can I generate something like the following instead, or at least some output that will give the desired result?</p>
  
  <pre><code>&lt;form action="/courses/admin" method="POST" class="form-horizontal"&gt;
  &lt;div class="span3"&gt;
    &lt;p&gt;&lt;b&gt;Prerequisite Courses&lt;/b&gt;&lt;/p&gt;
    &lt;div class="control-group"&gt;
      &lt;div class="controls"&gt;
        &lt;label class="checkbox"&gt;
          &lt;input name="skues" type="checkbox" value="true"&gt; sku1
        &lt;/label&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>