Description: Multi-Select Side by Side allows the user to select and remove multiple items quickly.
508 Guidelines: The screen reader will announce the different options with the arrow keys. Tab to navigate to an option then use enter to add or remove the selected option.
TIP: Change the mssbs class to mssbs-small for a multi-select side by side without an input field.
<div class="row">
<div class="mssbs">
<div class="col-md-6">
<div class="panel panel-default panel-w-list-group">
<div class="panel-heading">
<div class="mssbs-header">
Available Providers
</div>
<div class="mssbs-input">
<div class="control form-group">
<label for="available-providers-filter-results" class="sr-only">Filter Results</label>
<input id="available-providers-filter-results" class="form-control input-sm" type="text" name="name" title="Please enter in a filter" placeholder="Filter Results" />
</div>
</div>
</div>
<ul class="list-group">
<li class="list-group-item">
<div class="row">
<div class="col-md-11 col-xs-11">
Vehu, Five
</div>
<div class="col-md-1 col-xs-1">
<button title="Press enter to add provider" class="btn btn-icon" type="button"><i class="fa fa-plus"></i></button>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-md-11 col-xs-11">
Vehu, One
</div>
<div class="col-md-1 col-xs-1">
<button title="Press enter to add provider" class="btn btn-icon" type="button"><i class="fa fa-plus"></i></button>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-md-11 col-xs-11">
Vehu, Ten
</div>
<div class="col-md-1 col-xs-1">
<button title="Press enter to add provider" class="btn btn-icon" type="button"><i class="fa fa-plus"></i></button>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-md-11 col-xs-11">
Vehu, Three
</div>
<div class="col-md-1 col-xs-1">
<button title="Press enter to add provider" class="btn btn-icon" type="button"><i class="fa fa-plus"></i></button>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-md-11 col-xs-11">
Vehu, Four
</div>
<div class="col-md-1 col-xs-1">
<button title="Press enter to add provider" class="btn btn-icon" type="button"><i class="fa fa-plus"></i></button>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-default panel-w-list-group">
<div class="panel-heading">
<div class="mssbs-header">
Selected Providers
</div>
<div class="mssbs-input">
<div class="control form-group">
<label for="selected-providers-filter-results" class="sr-only">Filter Results</label>
<input id="selected-providers-filter-results" class="form-control input-sm" type="text" name="name" title="Please enter in a filter" placeholder="Filter Results" />
</div>
</div>
</div>
<ul class="list-group">
<li class="list-group-item">
<div class="row">
<div class="col-md-11 col-xs-11">
Vehu, Five
</div>
<div class="col-md-1 col-xs-1">
<button title="Press enter to remove provider" class="btn btn-icon" type="button"><i class="fa fa-times-circle"></i></button>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-md-11 col-xs-11">
Vehu, One
</div>
<div class="col-md-1 col-xs-1">
<button title="Press enter to remove provider" class="btn btn-icon" type="button"><i class="fa fa-times-circle"></i></button>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-md-11 col-xs-11">
Vehu, Ten
</div>
<div class="col-md-1 col-xs-1">
<button title="Press enter to remove provider" class="btn btn-icon" type="button"><i class="fa fa-times-circle"></i></button>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-md-11 col-xs-11">
Vehu, Three
</div>
<div class="col-md-1 col-xs-1">
<button title="Press enter to remove provider" class="btn btn-icon" type="button"><i class="fa fa-times-circle"></i></button>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-md-11 col-xs-11">
Vehu, Four
</div>
<div class="col-md-1 col-xs-1">
<button title="Press enter to remove provider" class="btn btn-icon" type="button"><i class="fa fa-times-circle"></i></button>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="mssbs">
<div class="col-md-6">
<div class="panel panel-default panel-w-list-group">
<div class="panel-heading">
<div class="mssbs-header-search">
<div class="control form-group">
<label for="available-providers-search" class="sr-only">Search</label>
<input id="available-providers-search" class="form-control input-sm" type="text" name="name" title="Please enter in a search" placeholder="Search" />
</div>
</div>
</div>
<ul class="list-group">
<li class="list-group-item">
<div class="row">
<div class="col-md-11 col-xs-11">
Vehu, Five
</div>
<div class="col-md-1 col-xs-1">
<button title="Press enter to add provider" class="btn btn-icon" type="button"><i class="fa fa-plus"></i></button>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-md-11 col-xs-11">
Vehu, One
</div>
<div class="col-md-1 col-xs-1">
<button title="Press enter to add provider" class="btn btn-icon" type="button"><i class="fa fa-plus"></i></button>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-md-11 col-xs-11">
Vehu, Ten
</div>
<div class="col-md-1 col-xs-1">
<button title="Press enter to add provider" class="btn btn-icon" type="button"><i class="fa fa-plus"></i></button>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-md-11 col-xs-11">
Vehu, Three
</div>
<div class="col-md-1 col-xs-1">
<button title="Press enter to add provider" class="btn btn-icon" type="button"><i class="fa fa-plus"></i></button>
</div>
</div>
</li>
<li class="list-group-item">
<div class="row">
<div class="col-md-11 col-xs-11">
Vehu, Four
</div>
<div class="col-md-1 col-xs-1">
<button title="Press enter to add provider" class="btn btn-icon" type="button"><i class="fa fa-plus"></i></button>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="col-md-6">
<div class="faux-table">
<div class="sr-only">This table represents symptoms categorized by date and time.</div>
<div class="header">
<div class="table-row">
<div>
<div>Symptoms</div>
</div>
<div>
<div>Date</div>
</div>
<div>
<div>Time</div>
</div>
<div>
<div></div>
</div>
</div>
</div>
<div class="body">
<div class="table-row">
<div>
<span>Itchy Watery Eyes</span>
</div>
<div>
<span>
<div class="control form-group">
<label for="date1" class="sr-only">Calendar</label>
<div class="input-group date">
<span class="input-group-addon"><i class="fa fa-calendar color-primary"></i></span>
<input type="text" class="form-control" title="Please enter in a date in the following format, MM/DD/YYYY" placeholder="MM/DD/YYYY" id="date1" />
</div>
</div>
</span>
</div>
<div>
<span>
<div class="control form-group">
<label for="time1" class="sr-only">Time Picker</label>
<div class="input-group bootstrap-timepicker">
<span class="input-group-addon"><i class="fa fa-clock-o color-primary"></i></span>
<input type="text" class="form-control timepicker" title="Please enter in a time in the following format, HH:MM." placeholder="HH:MM" id="time1" />
</div>ㄷ
</div>
</span>
</div>
<div>
<span>
<button type="button" class="btn btn-icon" title="Press enter to remove symptom"><i class="fa fa-times-circle"></i>
</button>
</span>
</div>
</div>
<div class="table-row">
<div>
<span>Symptom Name</span>
</div>
<div>
<span>
<div class="control form-group">
<label for="date2" class="sr-only">Calendar</label>
<div class="input-group date">
<span class="input-group-addon"><i class="fa fa-calendar color-primary"></i></span>
<input type="text" class="form-control" title="Please enter in a date in the following format, MM/DD/YYYY" placeholder="MM/DD/YYYY" id="date2" />
</div>
</div>
</span>
</div>
<div>
<span>
<div class="control form-group">
<label for="time2" class="sr-only">Time Picker</label>
<div class="input-group bootstrap-timepicker">
<span class="input-group-addon"><i class="fa fa-clock-o color-primary"></i></span>
<input type="text" class="form-control timepicker" title="Please enter in a time in the following format, HH:MM." placeholder="HH:MM" id="time2" />
</div>
</div>
</span>
</div>
<div>
<span><button type="button" class="btn btn-icon" title="Press enter to remove symptom"><i class="fa fa-times-circle"></i>
</button></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>