@pegakit/pegakit/source/_patterns/01-atoms/custom-select.md

The living styleguide, pattern library, UI ToolKit, and front-end build tools that power Pega's digital web properties.

---
title: Selectbox
---
<ul class="o-inline-list o-inline-list--large u-margin-bottom">
  <li class="o-inline-list__item">
    <a href="#atoms-selectbox">Custom Selectbox (Default)</a>
  </li>
  
  <li class="o-inline-list__item">
    <a href="#atoms-selectbox-native-only">Native Only</a>
  </li>
</ul>

<hr>


A progressively-enhanced, accessible &lt;select&gt; menu that works with AND without JavaScript (albeit, a little less shiny without JS).

Powered by the awesome (and jQuery-less) [Choices.js library](https://github.com/jshjohnson/Choices).



###Available Options:

1. [Custom Selectbox (Default)](#atoms-selectbox)

  This is the default look and feel for &lt;select&gt; menus, unless otherwise specified with one of the options below.

2. **Native &lt;select&gt; Only**

If you don't need or want to use the JavaScript "enhanced" version of the &lt;select&gt; element, you don't have to.

In the Twig template, simply set `selectbox.native_only` to `true` to omit the `js-custom-select` class on the &lt;select&gt; element itself.

Removing this class will cause the JavaScript that enhances this component to skip over it, leaving you with a 100% vanilla Browser-styled &lt;select&gt; menu.

Note: 


3. **With Search**

  In the Twig template, setting the `selectbox.with_search` option to `true` enables the option to search and filter terms in the list using your keyboard (search is set to false by default).


4. **With Search & Placeholder Text**

If search is enabled, you can also set the default search field placeholder text via the normal placeholder attribute on the &lt;select&gt; element. 

This string can be set in the Twig data via the `selectbox.placeholder` option.

5. **Disabled**