# Guarded switch

A critical switch under a flip-up cover, as in a cockpit. Lift the cover, then flip it; closing the cover returns it to safe, and the cover closes itself if left.

- Category: Coordination
- Docs: https://bevel-ui.vercel.app/components/guarded-switch
- Import from: `@/components/ui/guarded-switch`

## Install

```bash
npx shadcn@latest add @bevel/guarded-switch
```

npm dependencies (installed by the CLI): `@base-ui/react`, `cn`.

## Anatomy

```tsx
<GuardedSwitch checked={on} onCheckedChange={setOn}>
  <GuardedSwitchLabel />
  <GuardedSwitchControl />
  <GuardedSwitchStatus />
</GuardedSwitch>
```

## Parts

| Part | Renders | Description |
| --- | --- | --- |
| `GuardedSwitch` | div (group) | checked, defaultChecked, onCheckedChange. safeOnClose (default true) turns it off when the cover closes; autoClose closes the cover after --guarded-switch-close-after. disabled locks the cover shut; say why with aria-describedby. |
| `GuardedSwitchLabel` | span | Names the group and the switch. |
| `GuardedSwitchControl` | button + Switch | The cover (a button with aria-expanded) over a Base UI Switch that's disabled while the cover is closed. |
| `GuardedSwitchStatus` | span (status) | Off, cover open, or on, in words. |

## Example: Agent permissions and deploys

Lift a cover, then flip the switch. Leave it and the cover closes, turning it off.

```tsx
"use client"

import * as React from "react"
import {
  GuardedSwitch,
  GuardedSwitchControl,
  GuardedSwitchLabel,
  GuardedSwitchStatus,
} from "@/components/ui/guarded-switch"

/** Two critical switches. Lift a cover, then flip. Leave it and the cover closes, turning it off. */
export function GuardedSwitchDeploy() {
  const [shell, setShell] = React.useState(false)
  return (
    <div className="flex flex-col items-center gap-6">
      <div className="flex flex-wrap justify-center gap-6">
        <GuardedSwitch checked={shell} onCheckedChange={setShell}>
          <GuardedSwitchLabel>Agent shell access</GuardedSwitchLabel>
          <GuardedSwitchControl />
          <GuardedSwitchStatus />
        </GuardedSwitch>
        <GuardedSwitch>
          <GuardedSwitchLabel>Deploy to prod</GuardedSwitchLabel>
          <GuardedSwitchControl />
          <GuardedSwitchStatus />
        </GuardedSwitch>
      </div>
      <p className="max-w-xs text-center text-sm text-muted-foreground">
        {shell ? "The agent can run shell commands without asking." : "The agent asks before running shell commands."}
      </p>
    </div>
  )
}
```