# Toggle (https://openknowledge.ai/docs/reference/components/toggle)

Standalone expand/collapse block (Notion-style). Same render + props as `<Accordion>` — pick whichever vocabulary matches the vault

## Example

> **Show me the details**
>
> Click to expand
>
> Native `<details>` under the hood — same substrate as the app render.
> Pass a shared `name` to sibling toggles and the browser will keep
> only one open at a time.

```mdx
<Toggle title="Title">
  Body content revealed when the toggle is expanded.
</Toggle>
```

## Props

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `title` | `string` | yes |  | Heading shown inside the \<summary> |
| `defaultOpen` | `boolean` | no | `false` | When true, the block renders expanded on initial load |
| `icon` | `string` | no |  | Custom lucide icon override (e.g. \`lucide:Rocket\`) |
| `description` | `string` | no |  | Optional subtitle rendered below the title inside \<summary> |
| `id` | `string` | no |  | HTML id attribute for deep-linking (e.g. \`#advanced-options\`) |
| `name` | `string` | no |  | HTML5 \<details name=> group — siblings with the same name are mutually exclusive |

*Also matches:* `toggle`, `collapsible`, `expand`, `details`, `disclosure`, `fold`

## Author it

Type `/toggle` in the editor to insert it from the slash menu, or write the tag directly in source mode. The Properties panel on the right of the editor exposes every prop above as a form field once the block is selected.