SwitchToggle

SwitchToggle

Overview

The SwitchToggle component is a wrapper around the ToggleButtonGroup and ToggleButton components from react-bootstrap. It allows you to create toggle switches that behave like checkbox or radio buttons. This component is used to switch between different states (such as turning options on or off) and supports both controlled and uncontrolled usage.

SwitchToggle Component

SwitchToggle renders a toggle button group with checkbox or radio functionality.

Props

Prop Name	Type	Description	Default Value
type	string	Determines whether the group is a set of checkbox or radio buttons. Possible values are 'checkbox' or 'radio'.	'checkbox'
value	any	Controls the value of the toggle buttons in controlled mode. For checkbox, it accepts an array of values. For radio, it accepts a single value.	undefined
defaultValue	any	Sets the initial value in uncontrolled mode. For checkbox, it can be an array of pre-checked values. For radio, it sets a single pre-selected value.	undefined
onChange	function	Callback function called when the selected value changes. For checkbox, it passes an array of selected values. For radio, it passes a single value.	undefined
name	string	Used for grouping radio buttons. Required when type="radio".	undefined
children	node	The SwitchToggleButton components that represent the individual toggle buttons.	null

SwitchToggle also inherits all props from the ToggleButtonGroup component from react-bootstrap.

Usage Example (Uncontrolled)

import SwitchToggle from "../blendx-ui/src/SwitchToggle";

const SwitchToggleExample = () => (
  <>
    <SwitchToggle type="checkbox" defaultValue={[1]}>
      <SwitchToggle.Button value={1}>Option 1</SwitchToggle.Button>
      <SwitchToggle.Button value={2}>Option 2</SwitchToggle.Button>
      <SwitchToggle.Button value={3}>Option 3</SwitchToggle.Button>
    </SwitchToggle>

    <br />

    <SwitchToggle type="radio" name="radio-options" defaultValue={1}>
      <SwitchToggle.Button value={1}>Option 1</SwitchToggle.Button>
      <SwitchToggle.Button value={2}>Option 2</SwitchToggle.Button>
      <SwitchToggle.Button value={3}>Option 3</SwitchToggle.Button>
    </SwitchToggle>
  </>
);

SwitchToggleButton Component

SwitchToggleButton is used inside the SwitchToggle component to represent individual buttons.

Props

Prop Name	Type	Description	Default Value
value	any	The value that the button represents in the group.	undefined
checked	bool	If true, the button is pre-checked.	false
disabled	bool	If true, the button is disabled.	false
onChange	function	Callback function triggered when the button is clicked.	undefined

SwitchToggleButton inherits all props from the ToggleButton component of react-bootstrap.

Usage Example (Controlled)

import SwitchToggle from "../blendx-ui/src/SwitchToggle";
import { useState } from "react";

const ControlledToggleExample = () => {
  const [selected, setSelected] = useState([1, 3]);

  const handleChange = (val) => {
    setSelected(val);
  };

  return (
    <SwitchToggle type="checkbox" value={selected} onChange={handleChange}>
      <SwitchToggle.Button value={1}>Option 1</SwitchToggle.Button>
      <SwitchToggle.Button value={2}>Option 2</SwitchToggle.Button>
      <SwitchToggle.Button value={3}>Option 3</SwitchToggle.Button>
    </SwitchToggle>
  );
};

Additional Notes

• Uncontrolled Usage: For simple use cases where you don't need to track the value externally, use defaultValue for uncontrolled components.
• Controlled Usage: For complex scenarios where you need to track and manage the selected values, use the value and onChange props in controlled components.

Dependencies

Repository	Usage Count
frontend-app-staff-dashboard	5
frontend-app-dashboard	1
frontend-app-course-authoring	1

Detailed usage locations:

frontend-app-staff-dashboard

• src/pages/home/index.jsx
• src/pages/platform-settings/customization/appearance/BannerEdit.jsx
• src/pages/program-single/program-team/AddUserDrawer.jsx
• src/pages/users/AddUsersDrawer.jsx
• src/pages/utilities/notifications/NotificationsDrawer.jsx

frontend-app-dashboard

• src/pages/home/index.jsx

frontend-app-course-authoring

• src/cohorts/CohortDrawer.jsx