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}
    />
  )
}

PropTypeDefaultDescription

color

stringnullAccent Color of the toggled item
Edit this page on GitHub