Content blocks

Toggle

The toggle list: a disclosure triangle that shows or hides nested blocks. An open toggle with no children shows a clickable “Empty toggle” hint.

Click the triangle
Content inside the toggle.
Empty toggle

Usage

  • Use Toggle to hide secondary detail (FAQs, long notes, optional steps) behind a disclosure.
  • Control open with onOpenChange when the state should persist or be shared.
  • Don’t hide content people need to read first; keep primary content visible.
  • Don’t use Toggle for navigation or app sections; use Accordion or Tabs instead.

Installation

Install the package (React 19):

terminal
npm install @krackedui/motion

Import the styles once, in your app entry or root layout:

/src/main.tsx
import '@krackedui/motion/styles.css';

Use it anywhere inside your app's <Theme> (see Installation):

/src/ToggleExample.tsx
import { useState } from 'react';
import { BlockContent, TextBlock, Toggle, rt } from '@krackedui/motion';

export function ToggleDemo() {
  const [open, setOpen] = useState(true);
  return (
    <BlockContent>
      <Toggle text={rt('Click the triangle')} open={open} onOpenChange={setOpen}>
        <TextBlock text={rt('Content inside the toggle.')} />
      </Toggle>
      <Toggle text={rt('Empty toggle')} open />
    </BlockContent>
  );
}

Examples

Closed

Closed toggle
Another closed toggle

API Reference

Toggle

Based on <div> and supports its props. Adds:

PropTypeDefault
text
RichText
renderLeaf
LeafRenderer
open
boolean
false
onOpenChange
(open: boolean) => void
onEmptyClick
() => void
depth
number
0
spacing
{ top?: boolean; bottom?: boolean; nested?: boolean }
color
BlockColor
"default"
children
ReactNode

Accessibility

  • The triangle is a button with aria-expanded; Enter / Space toggle it.
  • Hidden content is unmounted while closed, so it is not reachable by keyboard or screen readers.
© 2026 Motion. Internal documentation.