ToggleGroup

Code

import { Toggle, ToggleGroup } from "@fadymondy/nasaq/web";export function ViewMode() {  return (    <ToggleGroup defaultValue={["list"]} aria-label="View mode">      <Toggle value="list">List</Toggle>      <Toggle value="grid">Grid</Toggle>    </ToggleGroup>  );}

Actions · beta

Live examples and controls: ToggleGroup in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/toggle-group.json

A row of buttons that each hold a pressed state. With the default single selection it is a segmented control (list / grid view, text alignment). With multiple several items can be pressed at once (bold, italic). Toggle alone is a single pressed-state button (star, pin). Built on Base UI Toggle and ToggleGroup.

When to useCopy Anchor Link

• Choosing a view mode, alignment or density from two to five short options.
• Formatting toolbars where each option is independent (multiple).

When not to useCopy Anchor Link

• Switching between panels of content: use Tabs.
• A choice that is submitted with a form and needs descriptions: use RadioGroup.
• Filtering by category with many chips: use ChipGroup.
• An immediate on/off setting: use Switch.

ImportCopy Anchor Link

import { Toggle, ToggleGroup } from "@fadymondy/nasaq/web";

Quick startCopy Anchor Link

import { Toggle, ToggleGroup } from "@fadymondy/nasaq/web";

export function ViewMode() {
  return (
    <ToggleGroup defaultValue={["list"]} aria-label="View mode">
      <Toggle value="list">List</Toggle>
      <Toggle value="grid">Grid</Toggle>
    </ToggleGroup>
  );
}

AnatomyCopy Anchor Link

<ToggleGroup>   data-slot="toggle-group"   data-variant="segmented | outline"
└─ <Toggle>     data-slot="toggle"         data-pressed when on

APICopy Anchor Link

ToggleGroup (ToggleGroupProps)Copy Anchor Link

All Base UI ToggleGroup props, plus:

ToggleCopy Anchor Link

All Base UI Toggle props: value (its id inside a group), pressed / defaultPressed, onPressedChange, disabled. Outside a group it renders as an outline button.

ExamplesCopy Anchor Link

Multiple selection with icons (icon-only items need aria-label):

import { Toggle, ToggleGroup } from "@fadymondy/nasaq/web";
import { Bold, Italic } from "lucide-react";

export function Format() {
  return (
    <ToggleGroup multiple variant="outline" aria-label="Formatting">
      <Toggle value="bold" aria-label="Bold"><Bold /></Toggle>
      <Toggle value="italic" aria-label="Italic"><Italic /></Toggle>
    </ToggleGroup>
  );
}

Controlled, in Arabic:

import { useState } from "react";
import { Toggle, ToggleGroup } from "@fadymondy/nasaq/web";

export function ViewModeAr() {
  const [value, setValue] = useState<string[]>(["list"]);
  return (
    <ToggleGroup value={value} onValueChange={setValue} aria-label="طريقة العرض">
      <Toggle value="list">قائمة</Toggle>
      <Toggle value="grid">شبكة</Toggle>
    </ToggleGroup>
  );
}

AccessibilityCopy Anchor Link

• The group has role="group"; items expose aria-pressed. Name the group with aria-label and localise it.
• In single mode, pressing the pressed item again unpresses it and gives an empty array; guard in onValueChange if one must always stay selected.

RTL & i18nCopy Anchor Link

Items are laid out in reading order, so the first item sits at the inline start. The outline variant rounds the inline-start and inline-end corners with logical classes.

Styling & tokensCopy Anchor Link

bg-secondary track, bg-card pressed item, bg-nq-selected and border-primary for pressed outline items, text-muted-foreground idle text, focus ring nq-focus. State attributes: data-pressed, data-disabled. className merges onto both parts.

Do / Don'tCopy Anchor Link

• Do keep labels to one or two words.
• Don't use it for page navigation.

RelatedCopy Anchor Link

tabs, radio-group, chip-group, button.

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-actions-toggle-group--docs