DropdownMenuRadioIcons() — ui Function Reference

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

Function tsx DocumentationAtlas SearchAPI

Entity Profile

DocumentationAtlas→ SearchAPI→ DropdownMenuRadioIcons() — ui Function Reference

Dependency Diagram

graph TD
  48b6b097_01b7_0ee4_e49e_c31fa7d2f752["DropdownMenuRadioIcons()"]
  2c465a78_c8fe_8c42_7a13_c44dd233aa5c["dropdown-menu-radio-icons.tsx"]
  48b6b097_01b7_0ee4_e49e_c31fa7d2f752 -->|defined in| 2c465a78_c8fe_8c42_7a13_c44dd233aa5c
  style 48b6b097_01b7_0ee4_e49e_c31fa7d2f752 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/examples/base/dropdown-menu-radio-icons.tsx lines 16–48

export function DropdownMenuRadioIcons() {
  const [paymentMethod, setPaymentMethod] = React.useState("card")

  return (
    <DropdownMenu>
      <DropdownMenuTrigger render={<Button variant="outline" />}>
        Payment Method
      </DropdownMenuTrigger>
      <DropdownMenuContent className="min-w-56">
        <DropdownMenuGroup>
          <DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>
          <DropdownMenuRadioGroup
            value={paymentMethod}
            onValueChange={setPaymentMethod}
          >
            <DropdownMenuRadioItem value="card">
              <CreditCardIcon />
              Credit Card
            </DropdownMenuRadioItem>
            <DropdownMenuRadioItem value="paypal">
              <WalletIcon />
              PayPal
            </DropdownMenuRadioItem>
            <DropdownMenuRadioItem value="bank">
              <Building2Icon />
              Bank Transfer
            </DropdownMenuRadioItem>
          </DropdownMenuRadioGroup>
        </DropdownMenuGroup>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}