# V toggle 14

> Server settings toggles with icon swap and status color

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

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

## Install

```bash
npx shadcn@latest add https://ui.cnippet.dev/r/v-toggle-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`

## Files

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

```tsx
"use client";

import {
  EyeIcon,
  EyeOffIcon,
  LockIcon,
  UnlockIcon,
  WifiIcon,
  WifiOffIcon,
} from "lucide-react";
import { useState } from "react";
import { Toggle } from "@/registry/default/ui/toggle";

const settings = [
  {
    description: "Allow only HTTPS connections",
    id: "secure",
    initial: true,
    offIcon: UnlockIcon,
    offLabel: "Insecure",
    onIcon: LockIcon,
    onLabel: "Secure mode",
  },
  {
    description: "Restrict access to public networks",
    id: "network",
    initial: true,
    offIcon: WifiOffIcon,
    offLabel: "Offline",
    onIcon: WifiIcon,
    onLabel: "Network access",
  },
  {
    description: "Show stack traces in error responses",
    id: "debug",
    initial: false,
    offIcon: EyeOffIcon,
    offLabel: "Debug hidden",
    onIcon: EyeIcon,
    onLabel: "Debug visible",
  },
];

export function Pattern() {
  const [states, setStates] = useState<Record<string, boolean>>(
    Object.fromEntries(settings.map((s) => [s.id, s.initial])),
  );

  const toggle = (id: string) =>
    setStates((prev) => ({ ...prev, [id]: !prev[id] }));

  return (
    <div className="w-full max-w-xs space-y-2">
      <p className="mb-3 font-semibold text-sm">Server settings</p>
      {settings.map((s) => {
        const on = states[s.id];
        const Icon = on ? s.onIcon : s.offIcon;
        return (
          <div
            className="flex items-center justify-between gap-3 rounded-lg border border-border px-3 py-2.5"
            key={s.id}
          >
            <div className="flex flex-col gap-0.5">
              <span className="font-medium text-sm">
                {on ? s.onLabel : s.offLabel}
              </span>
              <span className="text-muted-foreground text-xs">
                {s.description}
              </span>
            </div>
            <Toggle
              aria-label={on ? s.offLabel : s.onLabel}
              className={on ? "text-emerald-500" : "text-muted-foreground"}
              onPressedChange={() => toggle(s.id)}
              pressed={on}
              size="sm"
              variant="outline"
            >
              <Icon className="size-4" />
            </Toggle>
          </div>
        );
      })}
    </div>
  );
}
```