A row of pill-shaped buttons for turning one or more related options on and off, like bold/italic/underline formatting controls or single-select alignment pickers.
import ToggleGroup from "@/components/ui/toggle-group";
import { useState } from "react";
import {
AlignCenter,
AlignLeft,
AlignRight,
Bold,
Italic,
Underline,
} from "lucide-react";
export default function ToggleGroupDemo() {
const [marks, setMarks] = useState<string[]>(["bold"]);
const [align, setAlign] = useState<string[]>(["left"]);
return (
<div className="flex w-full max-w-[520px] flex-col gap-4">
<div className="flex flex-wrap items-center gap-3">
<ToggleGroup
label="Text style"
value={marks}
onValueChange={setMarks}
items={[
{ value: "bold", label: "Bold", icon: Bold, iconOnly: true },
{ value: "italic", label: "Italic", icon: Italic, iconOnly: true },
{
value: "underline",
label: "Underline",
icon: Underline,
iconOnly: true,
},
]}
/>
<ToggleGroup
label="Alignment"
type="single"
value={align}
onValueChange={setAlign}
items={[
{
value: "left",
label: "Align left",
icon: AlignLeft,
iconOnly: true,
},
{
value: "center",
label: "Align centre",
icon: AlignCenter,
iconOnly: true,
},
{
value: "right",
label: "Align right",
icon: AlignRight,
iconOnly: true,
},
]}
/>
</div>
<div className="rounded-2xl bg-surface-sunken p-4">
<p
className="text-[14px] leading-normal text-ink"
style={{
fontWeight: marks.includes("bold") ? 700 : 400,
fontStyle: marks.includes("italic") ? "italic" : "normal",
textDecoration: marks.includes("underline") ? "underline" : "none",
textAlign:
(align[0] as "left" | "center" | "right" | undefined) ?? "left",
}}
>
The consignment left Rotterdam at 06:10 and is on schedule for Lyon.
</p>
</div>
</div>
);
}