<section>
  <h1 id="tags">Tagging support</h1>

  <p>
    In addition to the dropdown menu of options, Select2 can also allow free-text responses.  This feature is called "tagging".  To enable free-text responses, set the <code>tags</code> option to <code>true</code>:
  </p>

  <div class="s2-example">
    <p>
      <select class="js-example-tags form-control">
        <option selected="selected">orange</option>
        <option>white</option>
        <option>purple</option>
      </select>
    </p>
  </div>

{% highlight js linenos %}
$(".js-example-tags").select2({
  tags: true
})
{% endhighlight %}

  <p>
    Note that when tagging is enabled the user can select from the pre-existing options or create a new option by picking the first choice, which is what the user has typed into the search box so far.
  </p>

  <h2>Tagging with multi-value select boxes</h2>

  <p>
    Tagging can also be used in multi-value select boxes. In the example below, we set the <code>multiple="multiple"</code> attribute on a Select2 control that also has <code>tags: true</code> enabled:
  </p>
  
  <div class="s2-example">
    <p>
      <select class="js-example-tags form-control" multiple="multiple">
        <option selected="selected">orange</option>
        <option>white</option>
        <option selected="selected">purple</option>
      </select>
    </p>
  </div>

  <p>
    Try entering a value that isn't listed in the dropdown - you'll be able to add it as a new option!
  </p>
</section>
