Single or multiple pressable tool-state grouping.
@combric/react · v1.1.1 · Current
import { ToggleGroup, ToggleGroupItem } from "@combric/react";Load the native stylesheet with @import "@combric/react/css";. This path does not require Tailwind.
import { ToggleGroup, ToggleGroupItem } from "@combric/react";
export function Example() {
return (
<ToggleGroup type="single" defaultValue="list" aria-label="View">
<ToggleGroupItem value="list">List</ToggleGroupItem>
<ToggleGroupItem value="grid">Grid</ToggleGroupItem>
</ToggleGroup>
);
}import { ToggleGroup, ToggleGroupItem } from "@combric/react";
export function Example() {
return (
<ToggleGroup type="multiple" defaultValue={["bold"]} aria-label="Text style">
<ToggleGroupItem value="bold">Bold</ToggleGroupItem>
<ToggleGroupItem value="italic">Italic</ToggleGroupItem>
<ToggleGroupItem value="underline">Underline</ToggleGroupItem>
</ToggleGroup>
);
}import { ToggleGroup, ToggleGroupItem } from "@combric/react";
export function Example() {
return (
<ToggleGroup type="single" orientation="vertical" defaultValue="list" aria-label="View">
<ToggleGroupItem value="list">List</ToggleGroupItem>
<ToggleGroupItem value="grid">Grid</ToggleGroupItem>
</ToggleGroup>
);
}| Name |
|---|
ToggleGroup |
ToggleGroupItem |
| Property / capability | Published contract |
|---|---|
| type | single | multiple |
| Contract | value/defaultValue |
| orientation | horizontal | vertical |
Groups toggle buttons without replacing native radio semantics when a form value is required.
Arrow keys move focus by orientation; Home and End move to boundaries without selecting.
Combric classes and canonical --combric-* variables provide the package presentation. Consumer className extends the required class; it does not replace the component contract.