Rad UI is still under active development. You are free to use it in your projects, but expect breaking changes. If you'd like to contribute to Rad UI, please check out Getting Started

ToggleGroup is a component that allows you to group multiple toggles together. Useful for when you want to allow users to select multiple options. For example, a user can select multiple filters for a search. 


import ToggleGroup from "@radui/ui/ToggleGroup";

const items = [
  { label: <FrameIcon />, value: 'item1' },
  { label: <CropIcon />, value: 'item2' },
  { label: <LayersIcon />, value: 'item3' },
  { label: <ColumnsIcon />, value: 'item4' }
];

const ToggleGroupWrapper = () => {
  const handleChange = (newPressed) => {
    console.log(newPressed)
  }

  return (
    <ToggleGroup 
      defaultPressed={false} 
      onChange={handleChange} 
      type="multiple" 
      items={items}
    />
  )
}