ivaynberg/select2

View on GitHub
docs/pages/01.getting-started/chapter.md

Summary

Maintainability
Test Coverage
---
title: Getting Started
taxonomy:
    category: docs
process:
    twig: true
twig_first: true
---

![Select2 logo](/images/logo.png)

# Select2

The jQuery replacement for select boxes

<div class="s2-docs-featurette">
    <a class="button" href="https://github.com/select2/select2/releases">Releases</a>
    <a class="button" href="https://forums.select2.org">Forums</a>
    <a class="button" href="https://github.com/select2/select2">GitHub</a>
</div>

Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.

<div class="s2-docs-featurette">
    <div class="grid">
      <div class="size-1-3 size-tablet-1-2">
          <i class="fa fa-language fa-4x"></i>
          <h4>In your language</h4>
          <p>
            Select2 comes with support for
            <a href="{{base_url_absolute}}/i18n#rtl-support">RTL environments</a>,
            <a href="{{base_url_absolute}}/i18n#diacritics">searching with diacritics</a> and
            <a href="{{base_url_absolute}}/i18n#">over 40 languages</a> built-in.
          </p>
      </div>

      <div class="size-1-3 size-tablet-1-2">
          <i class="fa fa-database fa-4x"></i>
          <h4>Remote data support</h4>
          <p>
            <a href="{{base_url_absolute}}/data-sources/ajax">Using AJAX</a> you can efficiently
            search large lists of items.
          </p>
      </div>

      <div class="size-1-3 size-tablet-1-2">
          <i class="fa fa-paint-brush fa-4x"></i>
          <h4>Theming</h4>
          <p>
            Fully skinnable, CSS built with Sass and an
            <a href="https://github.com/ttskch/select2-bootstrap4-theme">optional theme for Bootstrap 4</a>.
          </p>
      </div>
    </div>

    <div class="grid">
      <div class="size-1-3 size-tablet-1-2">
        <i class="fa fa-plug fa-4x"></i>
        <h4>Fully extensible</h4>
        <p>
          The <a href="{{base_url_absolute}}/advanced">plugin system</a>
          allows you to easily customize Select2 to work exactly how you want it
          to.
        </p>
      </div>

      <div class="size-1-3 size-tablet-1-2">
        <i class="fa fa-tag fa-4x"></i>
        <h4>Dynamic item creation</h4>
        <p>
          Allow users to type in a new option and
          <a href="{{base_url_absolute}}/tagging">add it on the fly</a>.
        </p>
      </div>

      <div class="size-1-3 size-tablet-1-2">
        <i class="fa fa-html5 fa-4x"></i>
        <h4>Full browser support</h4>
        <p>Support for both modern and legacy browsers is built-in, even including Internet Explorer 11.</p>
      </div>
    </div>
</div>