DropdownMenuCheckboxesIcons() — ui Function Reference

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

Function tsx DocumentationAtlas ContentSourcing

Entity Profile

DocumentationAtlas→ ContentSourcing→ DropdownMenuCheckboxesIcons() — ui Function Reference

Dependency Diagram

graph TD
  a973608a_a88d_1e18_3102_bdeeb16c2622["DropdownMenuCheckboxesIcons()"]
  342a43b2_dfb1_8493_828e_2e0fb761912b["dropdown-menu-checkboxes-icons.tsx"]
  a973608a_a88d_1e18_3102_bdeeb16c2622 -->|defined in| 342a43b2_dfb1_8493_828e_2e0fb761912b
  style a973608a_a88d_1e18_3102_bdeeb16c2622 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/radix/dropdown-menu-checkboxes-icons.tsx lines 15–61

export function DropdownMenuCheckboxesIcons() {
  const [notifications, setNotifications] = React.useState({
    email: true,
    sms: false,
    push: true,
  })

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline">Notifications</Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent className="w-48">
        <DropdownMenuGroup>
          <DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>
          <DropdownMenuCheckboxItem
            checked={notifications.email}
            onCheckedChange={(checked) =>
              setNotifications({ ...notifications, email: checked === true })
            }
          >
            <MailIcon />
            Email notifications
          </DropdownMenuCheckboxItem>
          <DropdownMenuCheckboxItem
            checked={notifications.sms}
            onCheckedChange={(checked) =>
              setNotifications({ ...notifications, sms: checked === true })
            }
          >
            <MessageSquareIcon />
            SMS notifications
          </DropdownMenuCheckboxItem>
          <DropdownMenuCheckboxItem
            checked={notifications.push}
            onCheckedChange={(checked) =>
              setNotifications({ ...notifications, push: checked === true })
            }
          >
            <BellIcon />
            Push notifications
          </DropdownMenuCheckboxItem>
        </DropdownMenuGroup>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}