These components are based on Twitter Bootstrap.

These components are distributed for free but you can contribute and make 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="bfh-selectbox">
  <input type="hidden" name="selectbox1" value="">
  <a class="bfh-selectbox-toggle" role="button" data-toggle="bfh-selectbox" href="#">
    <span class="bfh-selectbox-option input-medium" data-option="12">Option 12</span>
    <b class="caret"></b>
  </a>
  <div class="bfh-selectbox-options">
  <div role="listbox">
    <ul role="option">
      <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>
</div>

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

<div class="bfh-selectbox">
  <input type="hidden" name="selectbox2" value="">
  <a class="bfh-selectbox-toggle" role="button" data-toggle="bfh-selectbox" href="#">
    <span class="bfh-selectbox-option input-medium" data-option="12">Option 12</span>
    <b class="caret"></b>
  </a>
  <div class="bfh-selectbox-options">
  <div role="listbox">
    <ul role="option">
      <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>
</div>

Simple example for adding a select box with a filter

<div class="bfh-selectbox">
  <input type="hidden" name="selectbox3" value="">
  <a class="bfh-selectbox-toggle" role="button" data-toggle="bfh-selectbox" href="#">
    <span class="bfh-selectbox-option input-medium" data-option="12">Option 12</span>
    <b class="caret"></b>
  </a>
  <div class="bfh-selectbox-options">
    <input type="text" class="bfh-selectbox-filter">
    <div role="listbox">
    <ul role="option">
      <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>
</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 bfh-countries" data-country="US"></select>

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

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

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

<button onclick="$('#countries1').bfhcountries({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="bfh-selectbox bfh-countries" data-country="US" data-flags="true">
  <input type="hidden" value="">
  <a class="bfh-selectbox-toggle" role="button" data-toggle="bfh-selectbox" href="#">
    <span class="bfh-selectbox-option input-medium" data-option=""></span>
    <b class="caret"></b>
  </a>
  <div class="bfh-selectbox-options">
    <input type="text" class="bfh-selectbox-filter">
    <div role="listbox">
    <ul role="option">
    </ul>
    </div>
  </div>
</div>

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

<span class="bfh-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 bfh-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').bfhstates({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="bfh-selectbox bfh-states" data-country="US" data-state="CA">
  <input type="hidden" value="">
  <a class="bfh-selectbox-toggle" role="button" data-toggle="bfh-selectbox" href="#">
    <span class="bfh-selectbox-option input-medium" data-option=""></span>
    <b class="caret"></b>
  </a>
  <div class="bfh-selectbox-options">
  <div role="listbox">
    <ul role="option">
    </ul>
    </div>
  </div>
</div>

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

<select id="countries_states1" class="input-medium bfh-countries" data-country="US"></select>
<select class="input-medium bfh-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="bfh-selectbox bfh-countries" data-country="US">
  <input type="hidden" value="">
  <a class="bfh-selectbox-toggle" role="button" data-toggle="bfh-selectbox" href="#">
    <span class="bfh-selectbox-option input-medium" data-option=""></span>
    <b class="caret"></b>
  </a>
  <div class="bfh-selectbox-options">
  <div role="listbox">
    <ul role="option">
    </ul>
    </div>
  </div>
</div>
<div class="bfh-selectbox bfh-states" data-country="countries_states2">
  <input type="hidden" value="">
  <a class="bfh-selectbox-toggle" role="button" data-toggle="bfh-selectbox" href="#">
    <span class="bfh-selectbox-option input-medium" data-option=""></span>
    <b class="caret"></b>
  </a>
  <div class="bfh-selectbox-options">
  <div role="listbox">
    <ul role="option">
    </ul>
    </div>
  </div>
</div>

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

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

About currencies

For adding a drop-down of currencies or display currency name from country code, include bootstrap-formhelpers-currencies.{language}.js and bootstrap-formhelpers-currencies.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 currencies and selecting a default currency

<select class="input-medium bfh-currencies" data-currency="EUR"></select>

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

<select class="input-medium bfh-currencies" data-currencyList="USD,AUD,EUR"></select>

Example for loading the list of currencies in JavaScript and selecting a default currency

<button onclick="$('#currencies1').bfhcurrencies({currency: 'USD'})" class="btn">Load Currencies</button>
<select id="currencies1" class="input-medium"></select>

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

<div class="bfh-selectbox bfh-currencies" data-currency="EUR" data-flags="true">
  <input type="hidden" value="">
  <a class="bfh-selectbox-toggle" role="button" data-toggle="bfh-selectbox" href="#">
    <span class="bfh-selectbox-option input-medium" data-option=""></span>
    <b class="caret"></b>
  </a>
  <div class="bfh-selectbox-options">
    <input type="text" class="bfh-selectbox-filter">
    <div role="listbox">
    <ul role="option">
    </ul>
    </div>
  </div>
</div>

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

<span class="bfh-currencies" data-currency="XCD" data-flags="true"></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 bfh-phone" data-format="+1 (ddd) ddd-dddd">

Simple example for displaying a formatted phone number

<span class="bfh-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 bfh-phone" data-country="US">

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 bfh-languages" data-language="en"></select>

Example for loading the list of languages with country names

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

Example for displaying the language name and flag from language code

<span class="bfh-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 bfh-timezones" data-country="US"></select>

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

<button onclick="$('#timezones1').bfhtimezones({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="bfh-selectbox bfh-timezones" data-country="US">
  <input type="hidden" value="">
  <a class="bfh-selectbox-toggle" role="button" data-toggle="bfh-selectbox" href="#">
    <span class="bfh-selectbox-option input-medium" data-option=""></span>
    <b class="caret"></b>
  </a>
  <div class="bfh-selectbox-options">
  <div role="listbox">
    <ul role="option">
    </ul>
    </div>
  </div>
</div>

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

<select id="countries_timezones1" class="input-medium bfh-countries" data-country="US"></select>
<select class="input-medium bfh-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="bfh-selectbox bfh-countries" data-country="US">
  <input type="hidden" value="">
  <a class="bfh-selectbox-toggle" role="button" data-toggle="bfh-selectbox" href="#">
    <span class="bfh-selectbox-option input-medium" data-option=""></span>
    <b class="caret"></b>
  </a>
  <div class="bfh-selectbox-options">
  <div role="listbox">
    <ul role="option">
    </ul>
  </div>
  </div>
</div>
<div class="bfh-selectbox bfh-timezones" data-country="countries_timezones2">
  <input type="hidden" value="">
  <a class="bfh-selectbox-toggle" role="button" data-toggle="bfh-selectbox" href="#">
    <span class="bfh-selectbox-option input-medium" data-option=""></span>
    <b class="caret"></b>
  </a>
  <div class="bfh-selectbox-options">
  <div role="listbox">
    <ul role="option">
    </ul>
  </div>
  </div>
</div>

About Google fonts

For adding a drop-down of Google Fonts, include bootstrap-formhelpers-googlefonts.codes.js and bootstrap-formhelpers-googlefonts.js once alongside the other JS files.

Use cases

Simplest example, with default selected value.

<div class="bfh-selectbox bfh-googlefonts" data-family="Lato">
  <input type="hidden" value="">
  <a class="bfh-selectbox-toggle" role="button" data-toggle="bfh-selectbox" href="#">
    <span class="bfh-selectbox-option input-large" data-option=""></span>
    <b class="caret"></b>
  </a>
  <div class="bfh-selectbox-options">
    <input type="text" class="bfh-selectbox-filter">
    <div role="listbox">
    <ul role="option">
    </ul>
  </div>
  </div>
</div>

Display a subset.

<div class="bfh-selectbox bfh-googlefonts" data-subsets="latin-ext">
  <input type="hidden" value="">
  <a class="bfh-selectbox-toggle" role="button" data-toggle="bfh-selectbox" href="#">
    <span class="bfh-selectbox-option input-large" data-option=""></span>
    <b class="caret"></b>
  </a>
  <div class="bfh-selectbox-options">
    <input type="text" class="bfh-selectbox-filter">
    <div role="listbox">
    <ul role="option">
    </ul>
    </div>
  </div>
</div>

Limit font choices.

<div class="bfh-selectbox bfh-googlefonts" data-families="Open Sans,Josefin Slab,Avro,Lato,Vollkorn,Abril Fatface,Ubuntu,PT Sans,PT Serif,Old Standard TT,Droid Sans">
  <input type="hidden" value="">
  <a class="bfh-selectbox-toggle" role="button" data-toggle="bfh-selectbox" href="#">
    <span class="bfh-selectbox-option input-large" data-option=""></span>
    <b class="caret"></b>
  </a>
  <div class="bfh-selectbox-options">
    <input type="text" class="bfh-selectbox-filter">
    <div role="listbox">
    <ul role="option">
    </ul>
    </div>
  </div>
</div>

About Date Picker

For adding a date picker, include bootstrap-formhelpers-datepicker.{language}.js and bootstrap-formhelpers-datepicker.js once alongside the other JS files.

Use cases

Simplest example.

<div class="bfh-datepicker">
  <div class="input-prepend bfh-datepicker-toggle" data-toggle="bfh-datepicker">
    <span class="add-on"><i class="icon-calendar"></i></span>
    <input type="text" class="input-medium" readonly>
  </div>
  <div class="bfh-datepicker-calendar">
    <table class="calendar table table-bordered">
      <thead>
        <tr class="months-header">
          <th class="month" colspan="4">
            <a class="previous" href="#"><i class="icon-chevron-left"></i></a>
            <span></span>
            <a class="next" href="#"><i class="icon-chevron-right"></i></a>
          </th>
          <th class="year" colspan="3">
            <a class="previous" href="#"><i class="icon-chevron-left"></i></a>
            <span></span>
            <a class="next" href="#"><i class="icon-chevron-right"></i></a>
          </th>
        </tr>
        <tr class="days-header">
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
  </div>
</div>

Example showing how to set a default date and format.

<div class="bfh-datepicker" data-format="y-m-d" data-date="2000-01-01">
  <div class="input-prepend bfh-datepicker-toggle" data-toggle="bfh-datepicker">
    <span class="add-on"><i class="icon-calendar"></i></span>
    <input type="text" class="input-medium" readonly>
  </div>
  <div class="bfh-datepicker-calendar">
    <table class="calendar table table-bordered">
      <thead>
        <tr class="months-header">
          <th class="month" colspan="4">
            <a class="previous" href="#"><i class="icon-chevron-left"></i></a>
            <span></span>
            <a class="next" href="#"><i class="icon-chevron-right"></i></a>
          </th>
          <th class="year" colspan="3">
            <a class="previous" href="#"><i class="icon-chevron-left"></i></a>
            <span></span>
            <a class="next" href="#"><i class="icon-chevron-right"></i></a>
          </th>
        </tr>
        <tr class="days-header">
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>
  </div>
</div>

About Time Picker

For adding a time picker, include bootstrap-formhelpers-timepicker.js once alongside the other JS files.

Use cases

Simplest example.

<div class="bfh-timepicker">
  <div class="input-prepend bfh-timepicker-toggle" data-toggle="bfh-timepicker">
    <span class="add-on"><i class="icon-time"></i></span>
    <input type="text" class="input-medium" readonly>
  </div>
  <div class="bfh-timepicker-popover">
    <table class="table">
      <tbody>
        <tr>
          <td class="hour">
            <a class="next" href="#"><i class="icon-chevron-up"></i></a><br>
            <input type="text" class="input-mini" readonly><br>
            <a class="previous" href="#"><i class="icon-chevron-down"></i></a>
          </td>
          <td class="separator">:</td>
          <td class="minute">
            <a class="next" href="#"><i class="icon-chevron-up"></i></a><br>
            <input type="text" class="input-mini" readonly><br>
            <a class="previous" href="#"><i class="icon-chevron-down"></i></a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Example showing how to set a default time.

<div class="bfh-timepicker" data-time="08:00">
  <div class="input-prepend bfh-timepicker-toggle" data-toggle="bfh-timepicker">
    <span class="add-on"><i class="icon-time"></i></span>
    <input type="text" class="input-medium" readonly>
  </div>
  <div class="bfh-timepicker-popover">
    <table class="table">
      <tbody>
        <tr>
          <td class="hour">
            <a class="next" href="#"><i class="icon-chevron-up"></i></a><br>
            <input type="text" class="input-mini" readonly><br>
            <a class="previous" href="#"><i class="icon-chevron-down"></i></a>
          </td>
          <td class="separator">:</td>
          <td class="minute">
            <a class="next" href="#"><i class="icon-chevron-up"></i></a><br>
            <input type="text" class="input-mini" readonly><br>
            <a class="previous" href="#"><i class="icon-chevron-down"></i></a>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

About Fonts

For adding a drop-down of Fonts, include bootstrap-formhelpers-fonts.codes.js and bootstrap-formhelpers-fonts.js once alongside the other JS files.

Use cases

Simplest example, with default selected value.

<div class="bfh-selectbox bfh-fonts" data-family="Helvetica">
  <input type="hidden" value="">
  <a class="bfh-selectbox-toggle" role="button" data-toggle="bfh-selectbox" href="#">
    <span class="bfh-selectbox-option input-large" data-option=""></span>
    <b class="caret"></b>
  </a>
  <div class="bfh-selectbox-options">
    <input type="text" class="bfh-selectbox-filter">
    <div role="listbox">
    <ul role="option">
    </ul>
    </div>
  </div>
</div>

About Font Sizes

For adding a drop-down of Font Sizes, include bootstrap-formhelpers-fontsizes.codes.js and bootstrap-formhelpers-fontsizes.js once alongside the other JS files.

Use cases

Simplest example, with default selected value.

<div class="bfh-selectbox bfh-fontsizes" data-size="14">
  <input type="hidden" value="">
  <a class="bfh-selectbox-toggle" role="button" data-toggle="bfh-selectbox" href="#">
    <span class="bfh-selectbox-option input-large" data-option=""></span>
    <b class="caret"></b>
  </a>
  <div class="bfh-selectbox-options">
    <input type="text" class="bfh-selectbox-filter">
    <div role="listbox">
    <ul role="option">
    </ul>
    </div>
  </div>
</div>