Menus

MenuRadioGroup

One choice of several in a Menu, such as a sort order: its MenuRadioItems show a mark on the chosen one, and choosing keeps the menu open.

import { MenuRadioGroup } from "@/components/ouro/menu/menu";

Example

<MenuRadioGroup label="Sort by" value={sort} onValueChange={setSort}>
  <MenuRadioItem value="name">Name</MenuRadioItem>
  <MenuRadioItem value="date">Date added</MenuRadioItem>
</MenuRadioGroup>

Use instead when

Use MenuCheckboxItem instead for settings that are each on or off, and RadioGroup for a choice on the page.

Props

Type: MenuRadioGroupProps.

children (required): Type: ReactNode; The MenuRadioItems.
defaultValue: Type: string; The value chosen at first, uncontrolled.
label: Type: string; Names the group, shown above it: "Sort by".
onValueChange: Type: ((value: string) => void); Called with the value of the item chosen.
value: Type: string; The chosen value, to control it; pass onValueChange with it.

Prop	Type	Description
`children` (required)	`ReactNode`	The `MenuRadioItem`s.
`defaultValue`	`string`	The value chosen at first, uncontrolled.
`label`	`string`	Names the group, shown above it: "Sort by".
`onValueChange`	`((value: string) => void)`	Called with the value of the item chosen.
`value`	`string`	The chosen value, to control it; pass `onValueChange` with it.

Source on GitHub This page as Markdown