DropdownMenuCheckboxes() — ui Function Reference

Architecture documentation for the DropdownMenuCheckboxes() function in dropdown-menu-checkboxes.tsx from the ui codebase.

Function tsx DocumentationAtlas SearchAPI

Entity Profile

DocumentationAtlas→ SearchAPI→ DropdownMenuCheckboxes() — ui Function Reference

Dependency Diagram

graph TD
  3cbe1c27_16e1_447e_8fb0_ca5825a8c6cf["DropdownMenuCheckboxes()"]
  09e15ff9_ee16_5720_707c_3d83827d6b73["dropdown-menu-checkboxes.tsx"]
  3cbe1c27_16e1_447e_8fb0_ca5825a8c6cf -->|defined in| 09e15ff9_ee16_5720_707c_3d83827d6b73
  style 3cbe1c27_16e1_447e_8fb0_ca5825a8c6cf fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/radix/dropdown-menu-checkboxes.tsx lines 14–50

export function DropdownMenuCheckboxes() {
  const [showStatusBar, setShowStatusBar] = React.useState(true)
  const [showActivityBar, setShowActivityBar] = React.useState(false)
  const [showPanel, setShowPanel] = React.useState(false)

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline">Open</Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent className="w-40">
        <DropdownMenuGroup>
          <DropdownMenuLabel>Appearance</DropdownMenuLabel>
          <DropdownMenuCheckboxItem
            checked={showStatusBar ?? false}
            onCheckedChange={setShowStatusBar}
          >
            Status Bar
          </DropdownMenuCheckboxItem>
          <DropdownMenuCheckboxItem
            checked={showActivityBar}
            onCheckedChange={setShowActivityBar}
            disabled
          >
            Activity Bar
          </DropdownMenuCheckboxItem>
          <DropdownMenuCheckboxItem
            checked={showPanel}
            onCheckedChange={setShowPanel}
          >
            Panel
          </DropdownMenuCheckboxItem>
        </DropdownMenuGroup>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}