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
  29c19566_733b_6965_1e50_bc98370fac64["DropdownMenuCheckboxes()"]
  c8f1ecc0_1336_730c_0f7d_5c70c89ca386["dropdown-menu-checkboxes.tsx"]
  29c19566_733b_6965_1e50_bc98370fac64 -->|defined in| c8f1ecc0_1336_730c_0f7d_5c70c89ca386
  style 29c19566_733b_6965_1e50_bc98370fac64 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/base/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 render={<Button variant="outline" />}>
        Open
      </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>
  )
}