Togglegroup

Interactive preview

Rendered from the shared Frontfriend stories with React Base, the same preview Studio shows. Styling comes from your Design System; the code below is native to Reka UI.

Installation

Complete project setup first. Your configuration must select vue/reka and include your Design System ID.

pnpm exec frontfriend download toggle-group -f vue --primitive reka

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

<script setup lang="ts">
import { ToggleGroup } from "@/components/ui/toggle-group";
import { ToggleGroupItem } from "@/components/ui/toggle-group";
import { Icon } from "@/components/ui/icon";
import * as UI from "@/components/ui/toggle-group";

const Component = UI.ToggleGroup;

const args = {
  "variant": "default",
  "size": "default",
  "disabled": false,
} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown> & {
    variant?: "default" | "outline";
    size?: "default" | "sm" | "lg";
  };
</script>

<template>
  <ToggleGroup type="multiple" v-bind="args"
    ><ToggleGroupItem value="bold" aria-label="Toggle bold"
      ><Icon name="Bold" /></ToggleGroupItem
    ><ToggleGroupItem value="italic" aria-label="Toggle italic"
      ><Icon name="Italic" /></ToggleGroupItem
    ><ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough"
      ><Icon name="Underline" /></ToggleGroupItem
  ></ToggleGroup>
</template>

Examples

Default

<script setup lang="ts">
import { ToggleGroup } from "@/components/ui/toggle-group";
import { ToggleGroupItem } from "@/components/ui/toggle-group";
import { Icon } from "@/components/ui/icon";
import * as UI from "@/components/ui/toggle-group";

const Component = UI.ToggleGroup;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <ToggleGroup type="multiple" v-bind="args"
    ><ToggleGroupItem value="bold" aria-label="Toggle bold"
      ><Icon name="Bold" /></ToggleGroupItem
    ><ToggleGroupItem value="italic" aria-label="Toggle italic"
      ><Icon name="Italic" /></ToggleGroupItem
    ><ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough"
      ><Icon name="Underline" /></ToggleGroupItem
  ></ToggleGroup>
</template>

Outline

<script setup lang="ts">
import { ToggleGroup } from "@/components/ui/toggle-group";
import { ToggleGroupItem } from "@/components/ui/toggle-group";
import { Icon } from "@/components/ui/icon";
import * as UI from "@/components/ui/toggle-group";

const Component = UI.ToggleGroup;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <ToggleGroup type="multiple" variant="outline"
    ><ToggleGroupItem value="bold" aria-label="Toggle bold"
      ><Icon name="Bold" /></ToggleGroupItem
    ><ToggleGroupItem value="italic" aria-label="Toggle italic"
      ><Icon name="Italic" /></ToggleGroupItem
    ><ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough"
      ><Icon name="Underline" /></ToggleGroupItem
  ></ToggleGroup>
</template>

Single

<script setup lang="ts">
import { ToggleGroup } from "@/components/ui/toggle-group";
import { ToggleGroupItem } from "@/components/ui/toggle-group";
import { Icon } from "@/components/ui/icon";
import * as UI from "@/components/ui/toggle-group";

const Component = UI.ToggleGroup;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <ToggleGroup type="single"
    ><ToggleGroupItem value="bold" aria-label="Toggle bold"
      ><Icon name="Bold" /></ToggleGroupItem
    ><ToggleGroupItem value="italic" aria-label="Toggle italic"
      ><Icon name="Italic" /></ToggleGroupItem
    ><ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough"
      ><Icon name="Underline" /></ToggleGroupItem
  ></ToggleGroup>
</template>

Small

<script setup lang="ts">
import { ToggleGroup } from "@/components/ui/toggle-group";
import { ToggleGroupItem } from "@/components/ui/toggle-group";
import { Icon } from "@/components/ui/icon";
import * as UI from "@/components/ui/toggle-group";

const Component = UI.ToggleGroup;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <ToggleGroup type="multiple" size="sm"
    ><ToggleGroupItem value="bold" aria-label="Toggle bold"
      ><Icon name="Bold" /></ToggleGroupItem
    ><ToggleGroupItem value="italic" aria-label="Toggle italic"
      ><Icon name="Italic" /></ToggleGroupItem
    ><ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough"
      ><Icon name="Underline" /></ToggleGroupItem
  ></ToggleGroup>
</template>

Large

<script setup lang="ts">
import { ToggleGroup } from "@/components/ui/toggle-group";
import { ToggleGroupItem } from "@/components/ui/toggle-group";
import { Icon } from "@/components/ui/icon";
import * as UI from "@/components/ui/toggle-group";

const Component = UI.ToggleGroup;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <ToggleGroup type="multiple" size="lg"
    ><ToggleGroupItem value="bold" aria-label="Toggle bold"
      ><Icon name="Bold" /></ToggleGroupItem
    ><ToggleGroupItem value="italic" aria-label="Toggle italic"
      ><Icon name="Italic" /></ToggleGroupItem
    ><ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough"
      ><Icon name="Underline" /></ToggleGroupItem
  ></ToggleGroup>
</template>

Disabled

<script setup lang="ts">
import { ToggleGroup } from "@/components/ui/toggle-group";
import { ToggleGroupItem } from "@/components/ui/toggle-group";
import { Icon } from "@/components/ui/icon";
import * as UI from "@/components/ui/toggle-group";

const Component = UI.ToggleGroup;

const args = {

} satisfies Partial<
  InstanceType<typeof Component> extends { $props: infer Props } ? Props : {}
> &
  Record<string, unknown>;
</script>

<template>
  <ToggleGroup type="multiple" disabled
    ><ToggleGroupItem value="bold" aria-label="Toggle bold"
      ><Icon name="Bold" /></ToggleGroupItem
    ><ToggleGroupItem value="italic" aria-label="Toggle italic"
      ><Icon name="Italic" /></ToggleGroupItem
    ><ToggleGroupItem value="strikethrough" aria-label="Toggle strikethrough"
      ><Icon name="Underline" /></ToggleGroupItem
  ></ToggleGroup>
</template>

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by Reka UI.

Prop	Type	Default
`class`	`HTMLAttributes["class"]`	`—`
`size`	`string`	`—`
`spacing`	`number`	`—`
`variant`	`string`	`—`

ToggleGroupItem

Prop	Type	Default
`class`	`HTMLAttributes["class"]`	`—`
`size`	`string`	`—`
`variant`	`string`	`—`

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.