Flex UI Library (1.6.10)
User Interface Resources
Theme
Colors Icons Layout Typography
Components
Avatars Banners Buttons & Links Cards Charts Containers Dropdowns Forms Headers Listing Card Lists Modals & Dialogs Most Used Selector Navs Pages Panel Layout Popovers Progress Rental Calendar Tables Toast Tooltips & Labels Wells
Miscellaneous
Bugsnag Chart.js Cookie Banner Current User iOS Dynamic Type js-cookie Perfect Scrollbar Utilities Responsive Side Navigation Bar
Exploratory Components
Miscellaneous
Feature Examples
Address Search Contact Management Mobile Price Range 1 Price Range 2 Responsive Hot Sheet Responsive Layout
Product Marketing
Licensed Photos - [new window] Screenshot Library
Tools & Reference
Debug Tips
Forms
Collapsible Section Component
Select Show Less to close me. 


<div class="c-collapsible-trigger">
  <button class="btn btn-tertiary c-collapsible-toggle collapsed" type="button" data-toggle="collapse" data-target="#target-id">
    <span class="show-more-text">Show More</span>
    <span class="show-less-text">Show Less</span>
    <span class="flexicon flexicon-chevron--small"></span>
  </button>
</div>
<div class="collapse" id="target-id">
  Select Show Less to close me.
</div>
Inverse Collapsible Section Component
Select Show Less to close me. 


<div class="collapse" id="collapsible-target-id">
  Select Show Less to close me.
</div>
<div class="c-collapsible-trigger">
  <button class="btn btn-tertiary c-collapsible-toggle collapsed" type="button" data-toggle="collapse" data-target="#collapsible-target-id">
    <span class="show-more-text">Show More</span>
    <span class="show-less-text">Show Less</span>
    <span class="flexicon flexicon-chevron--small"></span>
  </button>
</div>
Standard Input Elements
Checkbox * 


<div class="form-group">
  <input id="checkbox-checked" type="checkbox" checked>
  <label for="checkbox-checked">
    Checked
  </label>
</div>

<div class="form-group">
  <input id="checkbox-unchecked" type="checkbox">
  <label for="checkbox-unchecked">
    Unchecked
  </label>
</div>

<div class="form-group">
  <input id="checkbox-checked-disabled" type="checkbox" checked disabled>
  <label for="checkbox-checked-disabled">
    Disabled &amp; Checked
  </label>
</div>

<div class="form-group">
  <input id="checkbox-disabled" type="checkbox" disabled>
  <label for="checkbox-disabled">
    Disabled &amp; Unchecked
  </label>
</div>

<div class="form-group">
  <input id="select-all-checkbox-unchecked" type="checkbox" class="select-all">
  <label for="select-all-checkbox-unchecked">
    Select All
  </label>
</div>

<div class="form-group">
  <input id="select-allcheckbox-checked" type="checkbox" class="select-all" checked>
  <label for="select-allcheckbox-checked">
    Select All (Checked)
  </label>
</div>
Radio Button * 

<div class="form-group">
  <input id="radio-checked" name="radio-button" type="radio" checked>
  <label for="radio-checked">
    Checked
  </label>
</div>

<div class="form-group">
  <input id="radio-unchecked" name="radio-button" type="radio">
  <label for="radio-unchecked">
    Unchecked
  </label>
</div>

<div class="form-group">
  <input id="radio-checked-disabled" type="radio" checked disabled>
  <label for="radio-checked-disabled">
    Disabled &amp; Checked
  </label>
</div>

<div class="form-group">
  <input id="radio-disabled" type="radio" disabled>
  <label for="radio-disabled">
    Disabled &amp; Unchecked
  </label>
</div>
* Implementation Notes for Checkboxes and Radio Buttons

The UI Library requires the HTML elements for checkboxes and radio buttons to be in a certain order. The <input> element must come immediately before the <label> element. This is required because custom styles need the elements to be in this order. Nesting <input> elements inside of <label> elements will not work with the UI Library versions of these elements because the styles applied to them require the aforementioned order.

Since nesting isn't allowed, use of the "for" attribute on the <label> element to match the "id" attribute on the <input> element is required to associate the two elements.

For examples of the proper use of these elements, see the Code Samples above.

Text Input 

  <div class="col-sm-6">
    <div class="form-group">
      <label for="username"> Username </label>
      <input class="form-control" id="username" type="text"
             placeholder="Enter your username">
    </div>
  </div>

  <div class="col-sm-6">
    <div class="form-group">
      <label for="password"> Password </label>
      <input class="form-control" id="password" type="password"
             placeholder="Enter your password">
    </div>
  </div>
Input Group Addon
@gmail.com 

  <div class="col-sm-12">
    <div class="input-group">
      <input class="form-control" id="addon" type="text" placeholder="Gmail Address">
      <span class="input-group-addon">@gmail.com</span>
    </div>
  </div>
Input Group With Button 

  <div class="col-sm-12">
    <div class="input-group-button">
      <input class="form-control" id="addon" type="text" placeholder="Gmail Address">
      <button class="btn btn-primary">Send</button>
    </div>
  </div>
Text Area 

<div class="form-group">
  <label for="notes"> Notes </label>
  <textarea class="form-control" id="notes" placeholder="Enter your text here"></textarea>
</div>
Input Help Messages
Help or instructional message
Field-specific help message
Help or instructional message
Field-specific help message 

  <div class="form-group">
    <label for="special1 "> Special Input 1 </label>
    <div class="help-block">
      Help or instructional message
    </div>
    <input class="form-control" id="special1 " type="text" placeholder="Special Input">
  </div>
  <div class="form-group">
    <label for="special2 "> Special Input 2 </label>
    <input class="form-control" id="special2 " type="text" placeholder="Special Input">
    <div class="help-block">
      Field-specific help message
    </div>
  </div>
  <div class="form-group">
    <label for="special3 "> Special Input 3 </label>
    <div class="help-block">
      Help or instructional message
    </div>
    <input class="form-control" id="special3 " type="text" placeholder="Special Input">
    <div class="help-block">
      Field-specific help message
    </div>
  </div>
Input with Help/Info Icon

The icon you use, and the resultant action on click/hover/etc is up to you

  <div class="form-group">
    <label for="help-icon-input">Input with help</label><a href="#" class="input-icon"><span class="flexicon flexicon-question--circle"></span></a>
    <input class="form-control" id="help-icon-input" type="text" placeholder="Check the help for more info">
  </div>
Input Error Messages
Transient error message: Field value needs to be between 0 and 100
Some static helpful information about this field 

  <div class="form-group has-error">
    <label class="control-label" for="special1 "> Input 1 </label>
    <input class="form-control" id="special1 " type="text" placeholder="Special Input">
    <div class="error-message">
      Transient error message: Field value needs to be between 0 and 100
    </div>
    <div class="help-block">
      Some static helpful information about this field
    </div>
  </div>
Input - Required

Add the class .flex-form-control--required to a <label>, or other element, which adds a red asterisk indicating a required field.

Indicates required field 

<div class="row">
  <div class="col-sm-6">
    <div class="form-group">
      <label class="flex-form-control--required" for="username-required">Username</label>
      <input class="form-control" id="username-required" type="text"
             placeholder="Enter your username">
    </div>
  </div>

  <div class="col-sm-6">
    <div class="form-group">
      <label class="flex-form-control--required" for="password-required">Password</label>
      <input class="form-control" id="password-required" type="password"
             placeholder="Enter your password">
    </div>
  </div>
</div>

<div class="help-block">
  <span class="flex-form-control--required"></span> Indicates required field
</div>
Disabled Text Input 

<div class="form-group">
  <label for="input-disabled"> Disabled </label>
  <input class="form-control" id="input-disabled" type="text"
         placeholder="Disabled text input" disabled>
</div>
Read Only Text Input 

<div class="form-group">
  <label for="input-readonly"> Read Only </label>
  <input class="form-control" id="input-readonly" type="text"
         placeholder="Read only text input" readonly>
</div>
Input - Error

Add the class .has-error to the .form-group element to indicate an error. If the label needs to change color to indicate the error, ensure the label has the class .control-label or the label won't change color.

These techniques can be used with any .form-group or input element type. 

<div class="form-group has-error">
  <label class="control-label"> Label With Error </label>
  <input class="form-control" type="text">
</div>
Custom Input Elements
Segmented Control

Note: There is a similar button component that can be used outside of forms.

<div class="form-group">
  <label> Bathrooms </label>
  <div class="c-segment">
    <input class="c-segment__input" id="bathrooms0" name="bathrooms" type="radio" value="0" checked>
    <label class="c-segment__label" for="bathrooms0"> Any </label>

    <input class="c-segment__input" id="bathrooms1" name="bathrooms" type="radio" value="1">
    <label class="c-segment__label" for="bathrooms1"> 1+ </label>

    <input class="c-segment__input" id="bathrooms2" name="bathrooms" type="radio" value="2">
    <label class="c-segment__label" for="bathrooms2"> 2+ </label>

    <input class="c-segment__input" id="bathrooms3" name="bathrooms" type="radio" value="3">
    <label class="c-segment__label" for="bathrooms3"> 3+ </label>

    <input class="c-segment__input" id="bathrooms4" name="bathrooms" type="radio" value="4">
    <label class="c-segment__label" for="bathrooms4"> 4+ </label>

    <input class="c-segment__input" id="bathrooms5" name="bathrooms" type="radio" value="5">
    <label class="c-segment__label" for="bathrooms5"> 5+ </label>
  </div>
</div>

<div class="form-group">
  <label> Bedrooms </label>
  <div class="c-segment">
    <input class="c-segment__input" id="bedrooms0" name="bedrooms" type="radio" value="0" checked>
    <label class="c-segment__label" for="bedrooms0"> Studio </label>

    <input class="c-segment__input" id="bedrooms1" name="bedrooms" type="radio" value="1">
    <label class="c-segment__label" for="bedrooms1"> 1+ </label>

    <input class="c-segment__input" id="bedrooms2" name="bedrooms" type="radio" value="2">
    <label class="c-segment__label" for="bedrooms2"> 2+ </label>

    <input class="c-segment__input" id="bedrooms3" name="bedrooms" type="radio" value="3">
    <label class="c-segment__label" for="bedrooms3"> 3+ </label>

    <input class="c-segment__input" id="bedrooms4" name="bedrooms" type="radio" value="4">
    <label class="c-segment__label" for="bedrooms4"> 4+ </label>

    <input class="c-segment__input" id="bedrooms5" name="bedrooms" type="radio" value="5">
    <label class="c-segment__label" for="bedrooms5"> 5+ </label>
  </div>
</div>
Small Segmented Control

For equal width segments, set a width on the container.


<div class="form-group">

  <label>Garage</label><br>
  <div class="c-segment c-segment-sm">
    <input class="c-segment__input" id="garageYes" name="garage" type="radio" value="Yes" checked>
    <label class="c-segment__label" for="garageYes">Yes</label>

    <input class="c-segment__input" id="garageNo" name="garage" type="radio" value="No">
    <label class="c-segment__label" for="garageNo">No</label>
  </div>
</div>

<p>For equal width segments, set a width on the container.</p>
<div class="form-group">
  <label>Pool</label><br>
  <div class="c-segment c-segment-sm" style="width: 500px">
    <input class="c-segment__input" id="poolYes" name="pool" type="radio" value="Yes" checked>
    <label class="c-segment__label" for="poolYes" style="">Yes</label>

    <input class="c-segment__input" id="poolNo" name="pool" type="radio" value="No">
    <label class="c-segment__label" for="poolNo" style="">No</label>

    <input class="c-segment__input" id="poolAskAgainLater" name="pool" type="radio" value="Ask Again Later">
    <label class="c-segment__label" for="poolAskAgainLater" style="">Ask Again Later</label>

  </div>
</div>
Numerical Range 

<label> Exact Values </label>
<div class="u-flex-align-center">
  <input class="form-control" id="min" type="text" placeholder="Min">
  <div class="flex-dash-separator"> </div>
  <input class="form-control" id="max" type="text" placeholder="Max">
</div>

<script>
$(function () {
  $('#min,#max').flexMaskWrapper();
});
</script>
Implementation Notes

The original input is cloned for the mask wrapper input and given a new ID based off the ID of the original input. The original input is always up to date with a "clean" value (no non-numeric characters) that can be queried and used at any time.

The default behavior can be overridden by passing in options like so: 

$('<selector>').flexMaskWrapper({
  mask: '<whatever mask is desired>',
  maskOptions: <options for the underlying library>
});

A mask library (jQuery Mask Plugin) is used for the masking operations. See the website for options and documentation.

Toggle Button
Some static helpful information about this field 

<div class="form-group">
  <label class="flex-toggle-button">
    <span>This is the label for a checked toggle button
      <a href="#" class="input-icon"><span class="flexicon flexicon-question--circle"></span></a>
    </span>
    <input type="checkbox" checked>
    <div class="flex-toggle-button"></div>
  </label>
  <div class="help-block">
    Some static helpful information about this field
  </div>
</div>

<div class="form-group">
  <label class="flex-toggle-button">
    This is the label for an unckecked toggle button
    <input type="checkbox">
    <div class="flex-toggle-button"></div>
  </label>
</div>
Search Input 

<div class="c-search-input">
  <span class="flexicon flexicon-search"></span>
  <input class="form-control" placeholder="Type to search...">
  <button class="flexicon flexicon-close" style="display: none;">
</div>

<script>
jQuery(function ($) {
  $('.c-search-input').flexSearchInput();
});
</script>
Implementation Notes
  • The exact HTML structure must be used.
  • The selector for the jQuery component must be for the enclosing `div` element. In this example, it is $('.c-search-input').flexSearchInput();
Select Elements
Single Select 

<select class="form-control">
  <option>Begins with</option>
  <option>Contains</option>
  <option>Ends with</option>
</select>
Select With Size / Multiple Select 

<select class="form-control" size="5" multiple>
  <option>Option 1</option>
  <option selected>Option 2</option>
  <option>Option 3</option>
  <option>Option 4</option>
  <option>Option 5</option>
  <option>Option 6</option>
  <option>Option 7</option>
  <option>Option 8</option>
  <option>Option 9</option>
</select>
Select With Size / Multiple Select and Optgroups

Note: The styles below only apply to Chrome, Firefox, and Edge. In Safari and Internet Explorer (version 11 and likely others), the list appears in a different style and works normally. 

<select class="form-control" size="10" multiple>
  <optgroup label="First optgroup">
    <option>Option 1</option>
    <option selected>Option 2</option>
    <option>Option 3</option>
  </optgroup>
  <optgroup label="Second optgroup">
    <option>Option 4</option>
    <option>Option 5</option>
    <option>Option 6</option>
  </optgroup>
  <optgroup label="Third optgroup">
    <option>Option 7</option>
    <option>Option 8</option>
    <option>Option 9</option>
  </optgroup>
</select>
Multiple Select (Select2) 

<select class="js-flexmls-ui" multiple>
  <option value="long">The first option is very long so that we can see what happens when there is a very long option</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
    <option value="5">Option 5</option>
    <option value="6">Option 6</option>
    <option value="7">Option 7</option>
    <option value="8">Option 8</option>
    <option value="9">Option 9</option>
    <option value="10">Option 10</option>
    <option value="11">Option 11</option>
    <option value="12">Option 12</option>
    <option value="13">Option 13</option>
    <option value="14">Option 14</option>
    <option value="15">Option 15</option>
    <option value="16">Option 16</option>
    <option value="17">Option 17</option>
    <option value="18">Option 18</option>
    <option value="19">Option 19</option>
    <option value="20">Option 20</option>
    <option value="21">Option 21</option>
    <option value="22">Option 22</option>
    <option value="23">Option 23</option>
    <option value="24">Option 24</option>
    <option value="25">Option 25</option>
    <option value="26">Option 26</option>
    <option value="27">Option 27</option>
    <option value="28">Option 28</option>
    <option value="29">Option 29</option>
    <option value="30">Option 30</option>
</select>
<script>
$(function () {
  $('.js-flexmls-ui').flexSelect2();
});
</script>
Multiple Select (Select2 - disabled) 

<select class="js-flexmls-ui-disabled" multiple disabled>
  <option value="long">The first option is very long so that we can see what happens when there is a very long option</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
    <option value="5">Option 5</option>
    <option value="6">Option 6</option>
    <option value="7">Option 7</option>
    <option value="8">Option 8</option>
    <option value="9">Option 9</option>
    <option value="10">Option 10</option>
    <option value="11">Option 11</option>
    <option value="12">Option 12</option>
    <option value="13">Option 13</option>
    <option value="14">Option 14</option>
    <option value="15">Option 15</option>
    <option value="16">Option 16</option>
    <option value="17">Option 17</option>
    <option value="18">Option 18</option>
    <option value="19">Option 19</option>
    <option value="20">Option 20</option>
    <option value="21">Option 21</option>
    <option value="22">Option 22</option>
    <option value="23">Option 23</option>
    <option value="24">Option 24</option>
    <option value="25">Option 25</option>
    <option value="26">Option 26</option>
    <option value="27">Option 27</option>
    <option value="28">Option 28</option>
    <option value="29">Option 29</option>
    <option value="30">Option 30</option>
</select>
<script>
$(function () {
  $('.js-flexmls-ui-disabled').flexSelect2();
});
</script>
Ajax Select (Select2) 

  <select class="js-ajax-select2">
    <option></option> <!-- an empty option is required for allowClear to work -->
  </select>
  <script>
  $(function () {
    $('.js-ajax-select2').flexSelect2({
      allowClear: true,
      ajax: {
        url: "https://api.github.com/search/repositories",
        delay: 250,
        data: function (params) {
          return {
            q: params.term, // search term
            page: params.page
          };
        },
        processResults: function (data, params) {

          var results = $.map(data.items, function(item) {
            return {
              id: item.id,
              text: item.name,
            };
          });

          params.page = params.page || 1;

          return {
            results: results,
            pagination: {
              more: (params.page * 30) < data.total_count
            }
          };
        }
      }
    })
  });
  </script>
Ajax Multi-Select (Select2)

This example comes from the Select2 Ajax documentation and uses the Github API for a sample Ajax implementation.

Note: The SmartMinimumData dataAdapter is incompatible with Ajax requests, so it is turned off when Ajax is used. 

<select class="js-ajax-multi-select2" multiple>
</select>
<script>
$(function () {
  $('.js-ajax-multi-select2').flexSelect2({
    ajax: {
      url: "https://api.github.com/search/repositories",
      dataType: 'json',
      delay: 250,
      data: function (params) {
        return {
          q: params.term, // search term
          page: params.page
        };
      },
      processResults: function (data, params) {
        // parse the results into the format expected by Select2
        // since we are using custom formatting functions we do not need to
        // alter the remote JSON data, except to indicate that infinite
        // scrolling can be used
        params.page = params.page || 1;

        return {
          results: data.items,
          pagination: {
            more: (params.page * 30) < data.total_count
          }
        };
      },
      cache: true
    },
    escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
    templateResult: formatRepo,
    templateSelection: formatRepoSelection
  });

function formatRepo (repo) {
  if (repo.loading) {
    return repo.text;
  }

  var markup = "<div class='select2-result-repository clearfix'>" +
    "<div class='select2-result-repository__avatar'><img src='" + repo.owner.avatar_url + "' /></div>" +
    "<div class='select2-result-repository__meta'>" +
      "<div class='select2-result-repository__title'>" + repo.full_name + "</div>";

  if (repo.description) {
    markup += "<div class='select2-result-repository__description'>" + repo.description + "</div>";
  }

  markup += "<div class='select2-result-repository__statistics'>" +
    "<div class='select2-result-repository__forks'><i class='fa fa-flash'></i> " + repo.forks_count + " Forks</div>" +
    "<div class='select2-result-repository__stargazers'><i class='fa fa-star'></i> " + repo.stargazers_count + " Stars</div>" +
    "<div class='select2-result-repository__watchers'><i class='fa fa-eye'></i> " + repo.watchers_count + " Watchers</div>" +
  "</div>" +
  "</div></div>";

  return markup;
}

function formatRepoSelection (repo) {
  return repo.full_name || repo.text;
}
});
</script>
Datepicker 

<div class="form-group">
  <label> Flatpickr Datepicker </label>
  <input class="form-control" id="flatpickr" type="text" placeholder="Select a date..." autocomplete="off">
</div>

<script>
$('#flatpickr').flatpickr({
  allowInput: true,
  dateFormat: 'm/d/y'
});
</script>
Implementation Notes

The flatpickr library has been selected for the datepicker component. It does everything necessary without requiring custom programming. There are two options (allowInput and dateFormat) that need to be specified when using the library. (See the Code Sample).

The flatpickr library automatically displays the system date selector on mobile devices. There is a mirror of the input field created so the date selector will appear and display the date. There is a hidden input that retains the ID attribute and has the correct date format. It can be used without any special code to process it on form submission.

If the input field for the datepicker is readonly, then the datepicker code should not be called to add the datepicker to the input.

Add the attribue autocomplete="off" to the input field to prevent autofill dropdowns from obscuring the datepicker popup.

Documentation

See the flatpickr website for documentation.

Source Files

See the distribution site for prebuilt versions of the files.