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
  2dbb1c65_50de_b64f_c199_15a7d4e7cc25["DropdownMenuRadioIcons()"]
  ab3e4a40_f01b_4cc8_04f6_3ed058151a9d["dropdown-menu-radio-icons.tsx"]
  2dbb1c65_50de_b64f_c199_15a7d4e7cc25 -->|defined in| ab3e4a40_f01b_4cc8_04f6_3ed058151a9d
  style 2dbb1c65_50de_b64f_c199_15a7d4e7cc25 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

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

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

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline">Payment Method</Button>
      </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>
  )
}