Edinburgh GEL

Filters and sorting options

Enabling search users to filter and sort results.

Search result tabs should also display the number of records being returned, while they should have an active, selected and default state.

Accessibility review

Filtering and sorting options Search results uses standard GEL elements (tabs) or standard well-formed HTML (headings paragraphs etc.). There is no problems with this element.

Accessibility issues

When JavaScript is not enabled a submit button will appear next to the sort by drop down list.

 

Choose a colour

Update
You are viewing the colour: Red (default), hex-value: #d50032

Choose viewport

      
<form class="form-horizontal">
  <fieldset>
    <div class="form-group">
      <label class="col-sm-3 control-label" for="textinput">Sort results</label>
      <div class="col-sm-9">
        <div class="input-group"> <span class="input-group-addon">
          <div class="glyphicon glyphicon-th-list"></div>
          </span>
          <select id="selectbasic" name="selectbasic" class="form-control">
            <option value="1">Sort by Date</option>
            <option value="2">Sort by Name</option>
          </select>
        </div>
      </div>
    </div>
  </fieldset>
</form>
<ul class="nav nav-tabs" id="myTab">
  <li class="active"> <a data-toggle="tab" href="#details"><span class="badge pull-right">180</span>All Results&nbsp;</a></li>
  <li class=""><a data-toggle="tab" href="#delivery"><span class="badge pull-right">20</span>Research&nbsp;</a></li>
  <li class=""><a data-toggle="tab" href="#brochure"><span class="badge pull-right">10</span>Courses&nbsp;</a></li>
  <li class=""><a data-toggle="tab" href="#reviews"><span class="badge pull-right">70</span>Staff&nbsp;</a></li>
</ul>