Variants
Example of Switch input - default
<BcSwitchInput label='Allow others to view your profile' id='switch-block-eg' name='switch' />
React documentation
Last modified:
Binary switch/toggle inputs.
To start using the BcSwitchInput
component in your project, ensure you import it as following:
import { BcSwitchInput } from "@bugcrowd/bc-elements";
BcSwitchInput Props
BcSwitchInput is parent wrapper component for switch input, it accepts following props.
Prop | Type | Required? | Default | Description |
---|---|---|---|---|
label | ReactElement or ReactElement[] or string | true | true | Used to define a caption for the <input> element. |
hideBtnText | boolean | false | false | Appends .bc-switch-input__switch-text--hidden class when set to true. |
justify | boolean | false | false | Used to display the element for full width available |
isReverse | boolean | false | false | Revert the order of the contents, placing the label before the switch input. |
Any extended types: React.InputHTMLAttributes<HTMLInputElement>
HTML
Last modified:
ℹ️ Only use switch inputs for boolean options.
Switch input labels
Note that switch inputs are nested inside their associated <label>
. This ensures that a user can select an option by clicking on the <input>
, the nested label text, or the whitespace between them.
The ON/OFF text is hidden from assistive technology users (eg screen readers) via aria-hidden="true"
since the state of the component is already communicated to the user via its checked
state.
Grouping switch inputs
Organize a list of switch input options (or other options, eg checkboxes) into a Settings list.
Design
Last modified:
Accessibility
Last modified:
A switch input may be focused using the Tab
key, and pressing the Space
key will toggle the switch. This component adheres to the switch
role requirements.
Rationale
Last modified:
A switch input allows a user to toggle a setting on or off, immediately affecting the user interface. Common use-cases include filtering interfaces and settings menus.
See also
Last modified: