Toggle

The Toggle component provides a customizable toggle switch with support for labels, badges, and various states. It also includes a Toggle.Card subcomponent for use within card layouts.

Usage:

import React from 'react';
import Toggle from 'blendx-ui/Toggle';

const MyToggle = () => (
  <Toggle
    checked={true}
    label="Enable Feature"
    sublabel="(optional)"
    badge="New"
    description="Toggle this feature on or off."
    onChange={(checked, name) => console.log(checked, name)}
  />
);

export default MyToggle;

Props:

• checked (bool): Indicates whether the toggle is checked. Default is false.
• onChange (func): Callback function that is triggered when the toggle state changes. Receives the new checked state and the name of the toggle.
• inputRef (func | object): A ref to the underlying input element.
• label (string): The main label text for the toggle.
• sublabel (string): Optional sublabel text displayed alongside the main label.
• badge (string): Optional badge text that appears next to the label.
• className (string): Additional CSS class names for styling.
• position (string): Position of the toggle switch relative to the label ('right' or 'left'). Default is 'left'.
• description (string): Optional description text displayed below the toggle.
• link (string): Optional link text that appears below the toggle description.

Example:

<Toggle
  checked={true}
  label="Dark Mode"
  badge="Beta"
  description="Switch to dark theme."
  onChange={(checked, name) => console.log('Enabled:', checked)}
  position="right"
/>

---

Toggle.Card

The Toggle.Card component is a variant of the Toggle component that is displayed within a card layout, making it suitable for use in card-based designs.

Usage:

import React from 'react';
import Toggle from 'blendx-ui/Toggle';

const MyToggleCard = () => (
  <Toggle.Card
    checked={true}
    label="Premium Feature"
    image="https://via.placeholder.com/150"
    badge="Pro"
    description="Enable this premium feature."
    onChange={(checked, name) => console.log(checked, name)}
  />
);

export default MyToggleCard;

Props:

• checked (bool): Indicates whether the toggle is checked. Default is false.
• onChange (func): Callback function that is triggered when the toggle state changes. Receives the new checked state and the name of the toggle.
• inputRef (func | object): A ref to the underlying input element.
• label (string): The main label text for the toggle.
• sublabel (string): Optional sublabel text displayed alongside the main label.
• badge (string): Optional badge text that appears next to the label.
• image (string): URL of the image to be displayed in the card.
• className (string): Additional CSS class names for styling.
• description (string): Optional description text displayed below the toggle.
• disabled (bool): If true, the toggle and card are disabled.

Example:

<Toggle.Card
  checked={true}
  label="Notifications"
  image="https://via.placeholder.com/150"
  badge="Important"
  description="Receive important notifications."
  onChange={(checked, name) => console.log('Enabled:', checked)}
  disabled={false}
/>

Notes:

• The Toggle component is the default export and can be used directly.
• The Toggle.Card component is a subcomponent of Toggle and should be accessed via Toggle.Card.
• Both components use the ContentLabel component from KeyComponents to render labels and badges.

Re-exported Components:

• Toggle.Card
• Toggle

---

Dependencies

Repository	Usage Count
frontend-app-staff-dashboard	4
frontend-app-learning	1

Detailed usage locations:

frontend-app-staff-dashboard

• src/pages/platform-settings/features/FeaturesCard.jsx
• src/pages/program-single/ProgramSingle.jsx
• src/pages/users/index.jsx
• src/utilities/notification/NotificationDrawer.jsx

frontend-app-learning

• src/course-home/outline-tab/widgets/WeeklyLearningGoalCard.jsx