Skip to content

Toggle & ToggleGroup Component

Description

The Toggle component represents a selectable button that can be used alone or inside a ToggleGroup for grouped selection. It supports exclusive selection (single toggle active) and multiple selection modes.

Props - Toggle

Prop Type Default Description
value any - Unique identifier for the toggle.
isActive boolean false Defines whether the toggle is active.
disabled boolean false Disables interaction with the toggle.
onClick (event) => void - Click handler for the toggle.

Props - ToggleGroup

Prop Type Default Description
value string - The currently selected value (for exclusive mode).
onChange (event, value) => void - Handles toggle state changes.
exclusive boolean true If true, allows only one toggle to be active at a time.

Example Usage

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
import { Toggle, ToggleGroup } from "@nomana-it/liberty-core"
import { useState } from "react";

export const ToggleExample = () => {
  const [selectedValue, setSelectedValue] = useState("option1");

  return (
    <ToggleGroup value={selectedValue} onChange={(e, value) => setSelectedValue(value)} exclusive>
      <Toggle value="option1">Option 1</Toggle>
      <Toggle value="option2">Option 2</Toggle>
      <Toggle value="option3">Option 3</Toggle>
    </ToggleGroup>
  );
};

🔗 GitHub Repository (Core): Liberty Core
🔗 GitHub Repository (Test Project): Liberty Test
📖 Live Documentation: Liberty Core Docs
💖 Sponsor & Support: Sponsor Liberty Core