Allows users to change context within an application.
A switcher is a component that allows the user change context within an application. Use a switcher to allow the user to change the NHS Board or the user they are administering.
Do:
Avoid:
<form class="turasForm">
<div class="switchBoards">
<div class="container">
<div class="row">
<div class="col-md-4 col-xl-5">
<div class="form-group form-select-list ">
<label class="control-label " for="Region">Region</label>
<div class="display-contents">
<select class="form-control turas-select2" turas-select2-close-on-select="true" turas-select2-live-search="false" id="RegionEX" name="Region">
<option value="1">North</option>
<option value="2">South</option>
<option value="3">East</option>
<option value="4">West</option>
</select>
</div>
<span class="field-validation-valid" data-valmsg-for="Region" data-valmsg-replace="true"></span>
</div>
</div>
<div class="col-md-8 col-xl-7">
<div class="form-group form-select-list ">
<label class="control-label " for="HealthBoard">Health Board</label>
<div class="display-contents">
<select class="form-control turas-select2" turas-select2-close-on-select="true" turas-select2-live-search="false" id="HealthBoard" name="HealthBoard">
<option value="1">NHS Lothian</option>
<option value="2">NHS Ayrshire and Arran</option>
<option value="3">NHS Borders</option>
<option value="4">NHS Dumfries and Galloway</option>
<option value="5">NHS Fife</option>
<option value="6">NHS Forth Valley</option>
<option value="7">NHS NHS Grampian</option>
<option value="8">NHS Greater Glasgow and Clyde</option>
<option value="9">NHS Highlandy</option>
<option value="10">NHS Orkney</option>
<option value="11">NHS Shetland</option>
<option value="12">NHS Tayside</option>
<option value="13">NHS Western Isles</option>
</select>
</div>
<span class="field-validation-valid" data-valmsg-for="HealthBoard" data-valmsg-replace="true"></span>
</div>
</div>
</div>
</div> <!-- /.container -->
</div> <!-- /.switchBoards -->
</form>
<form class="turasForm">
<div class="switchBoards">
<div class="container">
<div class="row">
<div class="col-md-4 col-xl-5">
<div class="form-group form-select-list ">
<label class="control-label " for="Region">Region</label>
<div class="display-contents">
<select class="form-control turas-select2" turas-select2-close-on-select="true" turas-select2-live-search="false" id="RegionEX" name="Region">
<option value="1">North</option>
<option value="2">South</option>
<option value="3">East</option>
<option value="4">West</option>
</select>
</div>
<span class="field-validation-valid" data-valmsg-for="Region" data-valmsg-replace="true"></span>
</div>
</div>
<div class="col-md-8 col-xl-7">
<div class="form-group form-select-list ">
<label class="control-label " for="HealthBoard">Health Board</label>
<div class="display-contents">
<select class="form-control turas-select2" turas-select2-close-on-select="true" turas-select2-live-search="false" id="HealthBoard" name="HealthBoard">
<option value="1">NHS Lothian</option>
<option value="2">NHS Ayrshire and Arran</option>
<option value="3">NHS Borders</option>
<option value="4">NHS Dumfries and Galloway</option>
<option value="5">NHS Fife</option>
<option value="6">NHS Forth Valley</option>
<option value="7">NHS NHS Grampian</option>
<option value="8">NHS Greater Glasgow and Clyde</option>
<option value="9">NHS Highlandy</option>
<option value="10">NHS Orkney</option>
<option value="11">NHS Shetland</option>
<option value="12">NHS Tayside</option>
<option value="13">NHS Western Isles</option>
</select>
</div>
<span class="field-validation-valid" data-valmsg-for="HealthBoard" data-valmsg-replace="true"></span>
</div>
</div>
</div>
</div> <!-- /.container -->
</div> <!-- /.switchBoards -->
</form>
This component is partially compliant with the WCAG 2.2 standard because of the following non compliances:
