---
title: Toggle
description: Render controlled boolean controls
type: reference
summary: Toggle is the provider-backed replacement for the former Switch export.
url: /docs/components/toggle
source: apps/template/content/docs/components/toggle.mdx
related:
  - /docs/components
  - /docs/components/input
---

# Toggle

import { ToggleDemo } from "@/components/geistdocs/toggle-demo";

<div className="not-prose my-6 flex min-h-32 items-center justify-center rounded-lg border border-gray-400 bg-background-100 p-6">
  <ToggleDemo />
</div>

```tsx
"use client";

import { Toggle } from "@vercel/geistdocs/components/toggle";
import { useState } from "react";

export function Setting() {
  const [enabled, setEnabled] = useState(false);
  return (
    <Toggle checked={enabled} onChange={setEnabled}>
      Enable previews
    </Toggle>
  );
}
```

Use `Toggle` and `onChange`; the v1 `Switch` and `onCheckedChange` names are not exported in Geistdocs v2.