ToggleGroup

Single — ToggleGroupGroup

At most one item is active at a time; arrow keys move focus according to the orientation.

tsx

import { ToggleGroupGroup } from "~/components/ui/base/toggle-group";

const items = [
  { value: "left", label: "Left" },
  { value: "center", label: "Center" },
  { value: "right", label: "Right" },
];

<ToggleGroupGroup items={items} defaultValue="center" />

Multiple

Multiple active values at once (e.g. bold and italic together).

tsx

import { ToggleGroupGroup } from "~/components/ui/base/toggle-group";

const items = [
  { value: "bold", label: "Bold" },
  { value: "italic", label: "Italic" },
  { value: "underline", label: "Underline" },
];

<ToggleGroupGroup multiple items={items} defaultValue={["bold", "italic"]} />

Vertical

Vertical arrangement via orientation="vertical".

tsx

import { ToggleGroupGroup } from "~/components/ui/base/toggle-group";

const items = [
  { value: "left", label: "Left" },
  { value: "center", label: "Center" },
  { value: "right", label: "Right" },
];

<ToggleGroupGroup
  orientation="vertical"
  items={items}
  defaultValue="left"
/>

Compound API

For controlled state use bind:value on ToggleGroup.Root (see the Qwik UI Toggle Group documentation).

tsx

import { ToggleGroup } from "~/components/ui/base/toggle-group";

<ToggleGroup.Root multiple value={["a"]} aria-label="Tools">
  <ToggleGroup.Item value="a">A</ToggleGroup.Item>
  <ToggleGroup.Item value="b">B</ToggleGroup.Item>
</ToggleGroup.Root>

Metadata

Source: meta.generated.json (see npm run generate)

File base/toggle-group/meta.generated.json not found or path not allowed.