Component reference
ToggleGroup
Choose several formatting options in one group.
Preview
Live previewOptional six-digit hex. Clear to restore the preset. Check contrast with your brand color.
Changes apply to this preview only.
Width adapts to the available space
"use client";
import { useState } from "react";
import { Badge, ToggleGroup, ToggleGroupItem } from "@pimolu/react";
function ControlledMultipleGroup() {
const [formats, setFormats] = useState<string[]>([
"bold",
]);
return (
<div className="grid gap-5 min-w-0">
<div className="flex flex-wrap items-center gap-3 min-w-0">
{
formats.length === 0
? (<Badge variant="neutral">none</Badge>)
: (formats.map((format) => (<Badge
key={format}
variant="secondary"
>
{format}
</Badge>)))
}
</div>
<ToggleGroup
type="multiple"
aria-label="Text formatting"
value={formats}
onValueChange={setFormats}
>
<ToggleGroupItem value="bold">Bold</ToggleGroupItem>
<ToggleGroupItem value="italic">Italic</ToggleGroupItem>
<ToggleGroupItem value="underline">Underline</ToggleGroupItem>
</ToggleGroup>
</div>
);
}
export function DemoExample() {
return (<ControlledMultipleGroup />);
}More examples
Different configurations and compositions using the real Pimolu API. Each preview runs independently and follows the site appearance.
Single
type='single' with a controlled value; clicking the selected item keeps it selected.
Variants and sizes
The group passes its variant and size to every item.
Orientation and disabled
Vertical stacks the items; the group or a single item can be disabled.
Usage
Use the multiple-selection model for independent choices and single selection for exclusive modes.
API reference
Generated from the public TypeScript declarations. Native HTML attributes are inherited where the component extends them; this reference includes Pimolu props and selected common native attributes.
PimoluToggleGroupProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
childrenRequired | ReactNode | — | Public Pimolu prop; see the source declaration for details. |
variant | "outline" | "ghost" | "default" | undefined | "default" | Visual treatment shared by the items. |
size | "sm" | "md" | "lg" | undefined | "md" | Height and font size shared by the items. |
orientation | PimoluToggleGroupOrientation | undefined | "horizontal" | Layout of the items. Defaults to "horizontal". |
disabled | boolean | undefined | false | Disable every item. |
aria-label | string | undefined | — | Accessible name of the group. |
aria-labelledby | string | undefined | — | Id of the element that names the group. |
className | string | undefined | — | Public Pimolu prop; see the source declaration for details. |
type | "single" | "multiple" | undefined | — | One selected value at a time. Any number of selected values. |
value | string | string[] | undefined | — | Public Pimolu prop; see the source declaration for details. |
defaultValue | string | string[] | undefined | — | Public Pimolu prop; see the source declaration for details. |
onValueChange | ((value: string) => void) | ((value: string[]) => void) | undefined | — | Public Pimolu prop; see the source declaration for details. |
childrenRequiredReactNodeNo default extracted.
Public Pimolu prop; see the source declaration for details.
variant"outline" | "ghost" | "default" | undefinedDefault: "default"
Visual treatment shared by the items.
size"sm" | "md" | "lg" | undefinedDefault: "md"
Height and font size shared by the items.
orientationPimoluToggleGroupOrientation | undefinedDefault: "horizontal"
Layout of the items. Defaults to "horizontal".
disabledboolean | undefinedDefault: false
Disable every item.
aria-labelstring | undefinedNo default extracted.
Accessible name of the group.
aria-labelledbystring | undefinedNo default extracted.
Id of the element that names the group.
classNamestring | undefinedNo default extracted.
Public Pimolu prop; see the source declaration for details.
type"single" | "multiple" | undefinedNo default extracted.
One selected value at a time. Any number of selected values.
valuestring | string[] | undefinedNo default extracted.
Public Pimolu prop; see the source declaration for details.
defaultValuestring | string[] | undefinedNo default extracted.
Public Pimolu prop; see the source declaration for details.
onValueChange((value: string) => void) | ((value: string[]) => void) | undefinedNo default extracted.
Public Pimolu prop; see the source declaration for details.
PimoluToggleGroupItemProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
valueRequired | string | — | Value toggled by this item. |
disabled | boolean | undefined | false | Public Pimolu prop; see the source declaration for details. |
childrenRequired | ReactNode | — | Public Pimolu prop; see the source declaration for details. |
className | string | undefined | — | Public Pimolu prop; see the source declaration for details. |
valueRequiredstringNo default extracted.
Value toggled by this item.
disabledboolean | undefinedDefault: false
Public Pimolu prop; see the source declaration for details.
childrenRequiredReactNodeNo default extracted.
Public Pimolu prop; see the source declaration for details.
classNamestring | undefinedNo default extracted.
Public Pimolu prop; see the source declaration for details.
Accessibility
- Name the group and verify arrow navigation without relying on color for selection.