Usage

• ToggleGroup component takes in type and className props.
• type can be "single" or "multiple". Default is "single".
• Children of ToggleGroup component are rendered as togglable buttons. Every child of ToggleGroup component should have value prop.
• value prop of every child of ToggleGroup component is the value of the button. If not passed, then inner text of the child is considered as value.

Example of using value generated by ToggleGroup of "single" type

import { ToggleGroup } from "dubsui"
import { useEffect, useState } from "react";
 
const Single = () => {
  const [value, setValue] = useState();
 
  useEffect(() => {
    console.log(value);
  }, [value]);
  return (
    <ToggleGroup value={value} onValueChange={setValue} type="single">
      <div data-value="a">A</div>
      <div data-value="b">B</div>
      <div data-value="c">C</div>
    </ToggleGroup>
  );
};

Example of using value generated by ToggleGroup of "multiple" type

import { ToggleGroup } from "dubsui"
import { useEffect, useState } from "react";
 
const Single = () => {
  const [value, setValue] = useState([]);
 
  useEffect(() => {
    console.log(value);
  }, [value]);
  return (
    <ToggleGroup value={value} onValueChange={setValue} type="multiple">
      <div data-value="a">A</div>
      <div data-value="b">B</div>
      <div data-value="c">C</div>
    </ToggleGroup>
  );
};

Customizable Design

More granular components provide you with more control over the design of the ToggleGroup component. You can customize the design of the ToggleGroup component by using the following sub-components:

• Style of every sub-component of the ToggleGroup component can be customized using the className prop.
• Pass in a CSS class or use Tailwind CSS utility classes to style the ToggleGroup component.