# V toggle group 14

> Code viewer toolbar with multi-select options

A shadcn/ui block from the [@cnippet](https://ui.cnippet.dev/) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/cnippet/v-toggle-group-14).

- Page, with a live preview: https://shadcn.exchange/r/cnippet/v-toggle-group-14
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/cnippet/v-toggle-group-14-light-08d174e0543ca015.png
- Registry item: https://ui.cnippet.dev/r/v-toggle-group-14.json
- Categories: toggle group
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://ui.cnippet.dev/r/v-toggle-group-14.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `@cnippet/toggle-group`

## Files

### `registry/default/variants/v-toggle-group-14.tsx`

```tsx
"use client";

import {
  CaseSensitiveIcon,
  FilterIcon,
  SortAscIcon,
  WrapTextIcon,
} from "lucide-react";
import { useState } from "react";
import { Separator } from "@/registry/default/ui/separator";
import {
  ToggleGroup,
  ToggleGroupItem,
} from "@/registry/default/ui/toggle-group";

export function Pattern() {
  const [activeOptions, setActiveOptions] = useState<string[]>(["wrap"]);

  const isActive = (id: string) => activeOptions.includes(id);

  return (
    <div className="flex w-full max-w-xs flex-col gap-4">
      <div className="rounded-lg border border-border">
        <div className="flex items-center gap-1 border-border border-b bg-muted/30 px-2 py-1">
          <ToggleGroup
            className="gap-0"
            onValueChange={setActiveOptions}
            value={activeOptions}
          >
            <ToggleGroupItem
              aria-label="Toggle word wrap"
              size="sm"
              value="wrap"
            >
              <WrapTextIcon className="size-3.5" />
            </ToggleGroupItem>
            <ToggleGroupItem
              aria-label="Toggle case-sensitive search"
              size="sm"
              value="case"
            >
              <CaseSensitiveIcon className="size-3.5" />
            </ToggleGroupItem>
            <ToggleGroupItem
              aria-label="Toggle filters"
              size="sm"
              value="filter"
            >
              <FilterIcon className="size-3.5" />
            </ToggleGroupItem>
            <ToggleGroupItem
              aria-label="Toggle sort ascending"
              size="sm"
              value="sort"
            >
              <SortAscIcon className="size-3.5" />
            </ToggleGroupItem>
          </ToggleGroup>
          <Separator className="mx-1 h-4" orientation="vertical" />
          <span className="text-muted-foreground text-xs">
            {activeOptions.length} active
          </span>
        </div>
        <div className="space-y-1.5 p-3">
          {[
            "src/components/Button.tsx",
            "src/components/Input.tsx",
            "src/components/Badge.tsx",
            "src/hooks/useForm.ts",
          ].map((file) => (
            <div
              className="flex items-center gap-2 text-muted-foreground text-xs"
              key={file}
            >
              <span className="size-1.5 rounded-full bg-emerald-500" />
              {file}
            </div>
          ))}
        </div>
      </div>
      <p className="text-center text-muted-foreground text-xs">
        {isActive("wrap") && "Word wrap on · "}
        {isActive("case") && "Case sensitive · "}
        {isActive("filter") && "Filtered · "}
        {isActive("sort") && "Sorted asc"}
        {activeOptions.length === 0 && "No options active"}
      </p>
    </div>
  );
}
```