Bugcrowd Design System

Bugcrowd Design System

Search/

Switch input

Last modified:

A binary input that allows the user to toggle between checked and not checked.

Variants

Example of Switch input - default

<BcSwitchInput
  label='Allow others to view your profile'
  id='switch-block-eg'
  name='switch'
/>
Open in Playroom

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.

PropTypeRequired?DefaultDescription
labelReactElement or ReactElement[] or stringtruetrueUsed to define a caption for the <input> element.
hideBtnTextbooleanfalsefalseAppends .bc-switch-input__switch-text--hidden class when set to true.
justifybooleanfalsefalseUsed to display the element for full width available
isReversebooleanfalsefalseRevert 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: