Components
ToggleButtonGroup
A toggle button group allows a user to toggle multiple options, with single or multiple selection.
ToggleButtonGroup
A toggle button group represents a set of related buttons that can be toggled on or off, supporting both single and multiple selection.
Preview
Standard Group
Icon Toolbar (Multiple Selection)
Animated (Segmented Control)
Import
import { ToggleButtonGroup, ToggleButton } from '@moul-dev/ui';Examples
Classic adjacent group
By default, the buttons in a ToggleButtonGroup touch and share border radiuses, showing a unified toolbar appearance:
<ToggleButtonGroup defaultValue={['left']}>
<ToggleButton id="left">Left</ToggleButton>
<ToggleButton id="center">Center</ToggleButton>
<ToggleButton id="right">Right</ToggleButton>
</ToggleButtonGroup>Icon Toolbar
You can render icons inside the <ToggleButton> components. When rendering icon-only buttons, make sure to add an aria-label to each button for accessibility:
import { ToggleButtonGroup, ToggleButton } from '@moul-dev/ui';
import { Bold, Italic, Underline } from 'lucide-react';
export default function Example() {
return (
<ToggleButtonGroup selectionMode="multiple" defaultValue={['bold', 'underline']}>
<ToggleButton id="bold" aria-label="Bold">
<Bold className="w-4 h-4" />
</ToggleButton>
<ToggleButton id="italic" aria-label="Italic">
<Italic className="w-4 h-4" />
</ToggleButton>
<ToggleButton id="underline" aria-label="Underline">
<Underline className="w-4 h-4" />
</ToggleButton>
</ToggleButtonGroup>
);
}Animated Segmented Control
Use the animated prop to style the group as a modern segmented control with a sliding selection indicator.
<ToggleButtonGroup animated defaultValue="day">
<ToggleButton id="day">Day</ToggleButton>
<ToggleButton id="week">Week</ToggleButton>
<ToggleButton id="month">Month</ToggleButton>
</ToggleButtonGroup>Vertical orientation
Use the orientation prop to align the group vertically:
Props
ToggleButtonGroup Props
Prop
Type
Default className: react-aria-ToggleButtonGroup
| Render Prop | CSS Selector |
|---|---|
orientation The orientation of the group. | [data-orientation] |
isDisabled Whether the group is disabled. | [data-disabled] |