# Dropdown menu: Radio group

> Wrap `<DropdownMenuRadioItem />` in a `<DropdownMenuRadioGroup />` to pick one option. A label inside the group names it for screen readers.

Example: https://hextaui.com/docs/dropdown-menu/examples/radio-group
Component docs: https://hextaui.com/docs/dropdown-menu.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/dropdown-menu-radio-group.json
```

This adds `components/examples/dropdown-menu/radio-group.tsx` with the Dropdown menu component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/dropdown-menu/radio-group.tsx"
"use client"

import * as React from "react"
import { IconChevronDown } from "@tabler/icons-react"

import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuLabel,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"

export function DropdownMenuRadioGroupDemo() {
  const [position, setPosition] = React.useState("bottom")

  return (
    <DropdownMenu>
      <DropdownMenuTrigger render={<Button variant="outline" />}>
        Panel position
        <IconChevronDown data-icon="inline-end" />
      </DropdownMenuTrigger>
      <DropdownMenuContent>
        <DropdownMenuRadioGroup value={position} onValueChange={setPosition}>
          <DropdownMenuLabel>Panel position</DropdownMenuLabel>
          <DropdownMenuRadioItem value="top">Top</DropdownMenuRadioItem>
          <DropdownMenuRadioItem value="bottom">Bottom</DropdownMenuRadioItem>
          <DropdownMenuRadioItem value="right">Right</DropdownMenuRadioItem>
        </DropdownMenuRadioGroup>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}
```

## Props in this example

### DropdownMenuTrigger

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `render` | `ReactElement \| (props, state) => ReactElement` | `<button>` |  |

### DropdownMenuRadioGroup

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `Value` | – |  |
| `onValueChange` | `(value: Value, details) => void` | – |  |

### DropdownMenuRadioItem

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `Value` | – |  |

## More Dropdown menu examples

- [Safe area](https://hextaui.com/docs/dropdown-menu/examples/safe-area.md)
- [Checkboxes](https://hextaui.com/docs/dropdown-menu/examples/checkboxes.md)
- [Check on the right](https://hextaui.com/docs/dropdown-menu/examples/indicator-end.md)
- [Select-like](https://hextaui.com/docs/dropdown-menu/examples/select.md)
- [Row actions](https://hextaui.com/docs/dropdown-menu/examples/row-actions.md)
- [Controlled](https://hextaui.com/docs/dropdown-menu/examples/controlled.md)
- [Open on hover](https://hextaui.com/docs/dropdown-menu/examples/hover.md)
- [Disabled](https://hextaui.com/docs/dropdown-menu/examples/disabled.md)
- [Long content](https://hextaui.com/docs/dropdown-menu/examples/long-content.md)
- [Scrolling](https://hextaui.com/docs/dropdown-menu/examples/scrolling.md)
- [Inside a sheet](https://hextaui.com/docs/dropdown-menu/examples/in-sheet.md)
- [Right to left](https://hextaui.com/docs/dropdown-menu/examples/rtl.md)