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
  391d6723_20a1_42cf_81a2_f0a8439415a1["DropdownMenuCheckboxesIcons()"]
  523e709a_a004_4309_4fd0_b9a0b8716d5d["dropdown-menu-checkboxes-icons.tsx"]
  391d6723_20a1_42cf_81a2_f0a8439415a1 -->|defined in| 523e709a_a004_4309_4fd0_b9a0b8716d5d
  style 391d6723_20a1_42cf_81a2_f0a8439415a1 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

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