ContextMenuWithCheckboxes() — ui Function Reference

Architecture documentation for the ContextMenuWithCheckboxes() function in context-menu-example.tsx from the ui codebase.

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ ContextMenuWithCheckboxes() — ui Function Reference

Dependency Diagram

graph TD
  57b35bc7_77b1_7424_883c_742a6386088d["ContextMenuWithCheckboxes()"]
  9e5e8d31_2c76_f044_a26d_6f6e085689ee["context-menu-example.tsx"]
  57b35bc7_77b1_7424_883c_742a6386088d -->|defined in| 9e5e8d31_2c76_f044_a26d_6f6e085689ee
  style 57b35bc7_77b1_7424_883c_742a6386088d fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/radix/examples/context-menu-example.tsx lines 274–310

function ContextMenuWithCheckboxes() {
  const [showBookmarksBar, setShowBookmarksBar] = React.useState(true)
  const [showFullUrls, setShowFullUrls] = React.useState(false)
  const [showDeveloperTools, setShowDeveloperTools] = React.useState(false)

  return (
    <Example title="With Checkboxes">
      <ContextMenu>
        <ContextMenuTrigger className="flex aspect-[2/0.5] w-full items-center justify-center rounded-lg border text-sm">
          Right click here
        </ContextMenuTrigger>
        <ContextMenuContent>
          <ContextMenuGroup>
            <ContextMenuCheckboxItem
              checked={showBookmarksBar}
              onCheckedChange={setShowBookmarksBar}
            >
              Show Bookmarks Bar
            </ContextMenuCheckboxItem>
            <ContextMenuCheckboxItem
              checked={showFullUrls}
              onCheckedChange={setShowFullUrls}
            >
              Show Full URLs
            </ContextMenuCheckboxItem>
            <ContextMenuCheckboxItem
              checked={showDeveloperTools}
              onCheckedChange={setShowDeveloperTools}
            >
              Show Developer Tools
            </ContextMenuCheckboxItem>
          </ContextMenuGroup>
        </ContextMenuContent>
      </ContextMenu>
    </Example>
  )
}