ReactToggle Group
A labelled group of toggle buttons with keyboard navigation.
Give your AI assistant this page as context.
Connect your library with MCPui/toggle-groupUsage
Get this component from a saved library export or the connected CLI. The imports below refer to local files installed in your app.
Import styles/components.css, then styles/theme.css once. Wrap your app in ThemeScope from components/ui/utils so typography, focus and overlays share the theme. The installation guide covers runtime dependencies and React/Next.js setup.
import { ToggleGroup } from './components/ui/toggle-group';
<ToggleGroup label="Text alignment" items={[{value:"left",label:"Left"},{value:"center",label:"Center"},{value:"right",label:"Right"}]}/>Design system
This component consumes your semantic colors, spacing, typography and shape tokens. Import the compiled styles and your theme once as described in Export.
Behavior and accessibility
- Provide meaningful labels for interactive controls.
- Connect action callbacks to your application logic.
- Verify keyboard navigation and contrast in your application.
Status: experimental during early access. Sample previews do not send emails, process payments or upload files to a service.
Source and props
This is the exported source, using the same implementation as the editor.
"use client";
import { ToggleGroup as Group } from "@base-ui/react/toggle-group";
import { Toggle } from "@base-ui/react/toggle";
import { cx } from "./utils";
export type ToggleGroupProps<Value extends string = string> = Omit<
Group.Props<Value>,
"className" | "children"
> & {
label: string;
className?: string;
items: Array<{ value: Value; label: string; disabled?: boolean }>;
};
export function ToggleGroup<Value extends string>({
label,
items,
className,
multiple = false,
...props
}: ToggleGroupProps<Value>) {
return (
<Group
{...props}
aria-label={label}
multiple={multiple}
className={cx("cr-toggle-group", className)}
>
{items.map((item) => (
<Toggle
key={item.value}
value={item.value}
disabled={item.disabled}
className="cr-toggle"
>
{item.label}
</Toggle>
))}
</Group>
);
}