These components are based on Twitter Bootstrap.

These components are distributed for free but you can contribute and making them better.

About select box

For adding a select box, include bootstrap-formhelpers-selectbox.js once alongside the other JS files.

Use cases

Simple example for adding a select box

<div class="selectbox">
  <input type="hidden" name="selectbox1" value="">
  <a class="selectbox-toggle" role="button" data-toggle="selectbox" href="#">
    <span class="selectbox-option input-medium" data-option="12">Option 12</span>
    <b class="caret"></b>
  </a>
  <div class="selectbox-options">
    <ul role="options">
      <li><a tabindex="-1" href="#" data-option="1">Option 1</a></li>
      <li><a tabindex="-1" href="#" data-option="2">Option 2</a></li>
      <li><a tabindex="-1" href="#" data-option="3">Option 3</a></li>
      <li><a tabindex="-1" href="#" data-option="4">Option 4</a></li>
      <li><a tabindex="-1" href="#" data-option="5">Option 5</a></li>
      <li><a tabindex="-1" href="#" data-option="6">Option 6</a></li>
      <li><a tabindex="-1" href="#" data-option="7">Option 7</a></li>
      <li><a tabindex="-1" href="#" data-option="8">Option 8</a></li>
      <li><a tabindex="-1" href="#" data-option="9">Option 9</a></li>
      <li><a tabindex="-1" href="#" data-option="10">Option 10</a></li>
      <li><a tabindex="-1" href="#" data-option="11">Option 11</a></li>
      <li><a tabindex="-1" href="#" data-option="12">Option 12</a></li>
      <li><a tabindex="-1" href="#" data-option="13">Option 13</a></li>
      <li><a tabindex="-1" href="#" data-option="14">Option 14</a></li>
      <li><a tabindex="-1" href="#" data-option="15">Option 15</a></li>
    </ul>
  </div>
</div>

Simple example for adding a select box and selecting a default option

<div class="selectbox">
  <input type="hidden" name="selectbox2" value="">
  <a class="selectbox-toggle" role="button" data-toggle="selectbox" href="#">
    <span class="selectbox-option input-medium" data-option="12">Option 12</span>
    <b class="caret"></b>
  </a>
  <div class="selectbox-options">
    <ul role="options">
      <li><a tabindex="-1" href="#" data-option="1">Option 1</a></li>
      <li><a tabindex="-1" href="#" data-option="2">Option 2</a></li>
      <li><a tabindex="-1" href="#" data-option="3">Option 3</a></li>
      <li><a tabindex="-1" href="#" data-option="4">Option 4</a></li>
      <li><a tabindex="-1" href="#" data-option="5">Option 5</a></li>
      <li><a tabindex="-1" href="#" data-option="6">Option 6</a></li>
      <li><a tabindex="-1" href="#" data-option="7">Option 7</a></li>
      <li><a tabindex="-1" href="#" data-option="8">Option 8</a></li>
      <li><a tabindex="-1" href="#" data-option="9">Option 9</a></li>
      <li><a tabindex="-1" href="#" data-option="10">Option 10</a></li>
      <li><a tabindex="-1" href="#" data-option="11">Option 11</a></li>
      <li><a tabindex="-1" href="#" data-option="12">Option 12</a></li>
      <li><a tabindex="-1" href="#" data-option="13">Option 13</a></li>
      <li><a tabindex="-1" href="#" data-option="14">Option 14</a></li>
      <li><a tabindex="-1" href="#" data-option="15">Option 15</a></li>
    </ul>
  </div>
</div>

Simple example for adding a select box with a filter

<div class="selectbox">
  <input type="hidden" name="selectbox2" value="">
  <a class="selectbox-toggle" role="button" data-toggle="selectbox" href="#">
    <span class="selectbox-option input-medium" data-option="12">Option 12</span>
    <b class="caret"></b>
  </a>
  <div class="selectbox-options">
    <input type="text" class="selectbox-filter">
    <ul role="options">
      <li><a tabindex="-1" href="#" data-option="1">Option 1</a></li>
      <li><a tabindex="-1" href="#" data-option="2">Option 2</a></li>
      <li><a tabindex="-1" href="#" data-option="3">Option 3</a></li>
      <li><a tabindex="-1" href="#" data-option="4">Option 4</a></li>
      <li><a tabindex="-1" href="#" data-option="5">Option 5</a></li>
      <li><a tabindex="-1" href="#" data-option="6">Option 6</a></li>
      <li><a tabindex="-1" href="#" data-option="7">Option 7</a></li>
      <li><a tabindex="-1" href="#" data-option="8">Option 8</a></li>
      <li><a tabindex="-1" href="#" data-option="9">Option 9</a></li>
      <li><a tabindex="-1" href="#" data-option="10">Option 10</a></li>
      <li><a tabindex="-1" href="#" data-option="11">Option 11</a></li>
      <li><a tabindex="-1" href="#" data-option="12">Option 12</a></li>
      <li><a tabindex="-1" href="#" data-option="13">Option 13</a></li>
      <li><a tabindex="-1" href="#" data-option="14">Option 14</a></li>
      <li><a tabindex="-1" href="#" data-option="15">Option 15</a></li>
    </ul>
  </div>
</div>

About countries

For adding a drop-down of countries or display country name from country code, include bootstrap-formhelpers-countries.{language}.js and bootstrap-formhelpers-countries.js once alongside the other JS files.

If you want to have access to the country flags, you can include bootstrap-formhelpers-countries.flags.css once alongside the other CSS files.

Use cases

Example for loading the list of countries and selecting a default country

<select class="input-medium countries" data-country="US"></select>

Example for loading the list of countries, limited to a specific list of countries

<select class="input-medium countries" data-countryList="US,AG,AU"></select>

Example for loading the list of countries in JavaScript and selecting a default country

<button onclick="$('#countries1').countries({country: 'US'})" class="btn">Load Countries</button>
<select id="countries1" class="input-medium"></select>

Example for loading the list of countries and flags using Bootstrap Form Helpers' Select Box

<div class="selectbox countries" data-country="US" data-flags="true">
  <input type="hidden" value="">
  <a class="selectbox-toggle" role="button" data-toggle="selectbox" href="#">
    <span class="selectbox-option input-medium" data-option=""></span>
    <b class="caret"></b>
  </a>
  <div class="selectbox-options">
    <input type="text" class="selectbox-filter">
    <ul class="selectbox-options" role="options">
    </ul>
  </div>
</div>

Example for displaying the country name and flag from a country code

<span class="countries" data-country="US" data-flags="true"></span>

About states

For adding a drop-down of states of a country or display state name from state and country code, include bootstrap-formhelpers-states.{language}.js and bootstrap-formhelpers-states.js once alongside the other JS files.

Use cases

Example for loading the list of states for a country and selecting a default state

<select class="input-medium states" data-country="US" data-state="CA"></select>

Example for loading the list of states for a country and selecting a default state in JavaScript

<button onclick="$('#states1').states({country: 'US', state: 'CA'})" class="btn">Load States</button>
<select id="states1" class="input-medium"></select>

Example for loading the list of states using Bootstrap Form Helpers' Select Box

<div class="selectbox states" data-country="US" data-state="CA">
  <input type="hidden" value="">
  <a class="selectbox-toggle" role="button" data-toggle="selectbox" href="#">
    <span class="selectbox-option input-medium" data-option=""></span>
    <b class="caret"></b>
  </a>
  <div class="selectbox-options">
    <ul class="selectbox-options" role="options">
    </ul>
  </div>
</div>

Example for loading the list of states based on a country selector

<select id="countries_states1" class="input-medium countries" data-country="US"></select>
<select class="input-medium states" data-country="countries_states1"></select>

Example for loading the list of states based on a country select using Bootstrap Form Helpers' Select Box

<div id="countries_states2" class="selectbox countries" data-country="US">
  <input type="hidden" value="">
  <a class="selectbox-toggle" role="button" data-toggle="selectbox" href="#">
    <span class="selectbox-option input-medium" data-option=""></span>
    <b class="caret"></b>
  </a>
  <div class="selectbox-options">
    <ul class="selectbox-options" role="options">
    </ul>
  </div>
</div>
<div class="selectbox states" data-country="countries_states2">
  <input type="hidden" value="">
  <a class="selectbox-toggle" role="button" data-toggle="selectbox" href="#">
    <span class="selectbox-option input-medium" data-option=""></span>
    <b class="caret"></b>
  </a>
  <div class="selectbox-options">
    <ul class="selectbox-options" role="options">
    </ul>
  </div>
</div>

Example for displaying the state name from a state and country code

<span class="states" data-country="US" data-state="CA"></span>

About phone

For simple formatting of phone numbers, include bootstrap-formhelpers-phone.format.js and bootstrap-formhelpers-phone.js once alongside the other JS files.

Use cases

Simple example for formatting a phone number in input text

<input type="text" class="input-medium phone" data-format="+1 (ddd) ddd-dddd">

Simple example for displaying a formatted phone number

<span class="phone" data-format="+1 (ddd) ddd-dddd" data-number="15555555555"></span>

Example for formatting a phone number based on a country

<input type="text" class="input-medium phone" data-country="US">

Example for formatting a phone number based on a country selector

<select id="countries_phone" class="input-medium countries" data-country="US"></select>
<select class="input-medium phone" data-country="countries_phone"></select>

Example for getting the unformatted phone number

<input id="phone1" type="text" class="input-medium phone" data-format="+1 (ddd) ddd-dddd">
<button onclick="alert($('#phone1').data('number'));return false;" class="btn">Get Phone</button>

About Languages

For adding a drop-down of languages or display languages name from language code, include bootstrap-formhelpers-languages.codes.js and bootstrap-formhelpers-languages.js once alongside the other JS files.

If you want to have access to the country names, you can include bootstrap-formhelpers-countries.{language}.js

If you want to have access to the country flags, you can include bootstrap-formhelpers-countries.flags.css once alongside the other CSS files.

Use cases

Example for loading the list of languages and selecting a default language

<select class="input-medium languages" data-language="en"></select>

Example for loading the list of languages with country names

<select class="input-medium languages" data-language="en_US" data-available="en_US,fr_CA,es_MX"></select>

Example for loading the list of languages and flags using Bootstrap Form Helpers' Select Box

<div class="selectbox languages" data-language="en_US" data-available="en_US,fr_CA,es_MX" data-flags="true">
  <input type="hidden" value="">
  <a class="selectbox-toggle" role="button" data-toggle="selectbox" href="#">
    <span class="selectbox-option input-medium" data-option=""></span>
    <b class="caret"></b>
  </a>
  <div class="selectbox-options">
    <ul class="selectbox-options" role="options">
    </ul>
  </div>
</div>

Example for displaying the language name and flag from language code

<span class="languages" data-language="en_US" data-flags="true"></span>

About timezones

For adding a drop-down of timezones of a country from country code, include bootstrap-formhelpers-timezones.codes.js and bootstrap-formhelpers-timezones.js once alongside the other JS files.

Use cases

Example for loading the list of timezones for a country

<select class="input-medium timezones" data-country="US"></select>

Example for loading the list of timezones for a country in JavaScript

<button onclick="$('#timezones1').timezones({country: 'US'})" class="btn">Load Timezones</button>
<select id="timezones1" class="input-medium"></select>

Example for loading the list of timezones using Bootstrap Form Helpers' Select Box

<div class="selectbox timezones" data-country="US">
  <input type="hidden" value="">
  <a class="selectbox-toggle" role="button" data-toggle="selectbox" href="#">
    <span class="selectbox-option input-medium" data-option=""></span>
    <b class="caret"></b>
  </a>
  <div class="selectbox-options">
    <ul class="selectbox-options" role="options">
    </ul>
  </div>
</div>

Example for loading the list of timezones based on a country selector

<select id="countries_timezones1" class="input-medium countries" data-country="US"></select>
<select class="input-medium timezones" data-country="countries_timezones1"></select>

Example for loading the list of timezones based on a country select using Bootstrap Form Helpers' Select Box

<div id="countries_timezones2" class="selectbox countries" data-country="US">
  <input type="hidden" value="">
  <a class="selectbox-toggle" role="button" data-toggle="selectbox" href="#">
    <span class="selectbox-option input-medium" data-option=""></span>
    <b class="caret"></b>
  </a>
  <div class="selectbox-options">
    <ul class="selectbox-options" role="options">
    </ul>
  </div>
</div>
<div class="selectbox timezones" data-country="countries_timezones2">
  <input type="hidden" value="">
  <a class="selectbox-toggle" role="button" data-toggle="selectbox" href="#">
    <span class="selectbox-option input-medium" data-option=""></span>
    <b class="caret"></b>
  </a>
  <div class="selectbox-options">
    <ul class="selectbox-options" role="options">
    </ul>
  </div>
</div>