Input Switch
Input Switch is used to select a boolean value.
When to use
- InputSwitch is a control that is used to quickly switch between two possible states. InputSwitch is only used for these binary actions that occur immediately after the user “flips the switch”. They are commonly used for “on/off” switches.
Guidelines
- Input Switch is best for settings requiring on/off or hide/show functionality for displaying results.
- Input Switches should take immediate effect and should not require the user to click Save or Submit to apply to the new state.
- Only use when a single selection is required and offers two options, e.g., an on/off type of decision.
- When deciding between a checkbox and Input switch control, think about the context of use.
- Keep labels short and concise.
- Ensure they are used consistently throughout the application or service.
- Both on/off states should be distinctively different.
Basic
The role="switch" attribute is used to define two-way value binding.
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault"></label>
</div>
On/Off
It is a two-state toggle – ON/OFF which allows users to switch between two options.
<div class="form-check form-switch">
<input type="checkbox" id="switch3" switch="bool" />
<label for="switch3" data-on-label="ON" data-off-label="OFF"></label>
</div>
Disabled
When disabled is present, the element cannot be edited.
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDisabled"disabled>
<label class="form-check-label" for="flexSwitchCheckDisabled"></label>
</div>
Accessibility
- The markup for the input switch uses standard HTML for a checkbox, so it has the built-in accessibility requirements, therefore no need for ARIA tags.
- For keyboard-only users, the input switch focus is made obvious.
- The label tag surrounds the input and the input switch code.
- The Tab key is used to move the focus to each input switch control. Either the Enter or Space key can be used to toggle between a checked or unchecked position.