# All files / src/form MenuItemRadio.tsx

100% Statements 117/117
100% Branches 1/1
100% Functions 1/1
100% Lines 117/117

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    1181x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    12x
    12x
    1x
     "use client";
    import { forwardRef } from "react";
    import {
      MenuItemInputToggle,
      type MenuItemRadioProps,
    } from "./MenuItemInputToggle.js";
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    import { type ICON_CONFIG } from "../icon/iconConfig.js";

    /**
     * **Client Component**
     *
     * This is a simple wrapper for the {@link MenuItemInputToggle} component to
     * render it as a radio and pulling the radio icon from the
     * {@link ICON_CONFIG}.
     *
     * If a menu or menubar contains more than one group of menuitemradio elements,
     * or if the menu contains one group and other, unrelated menu items, authors
     * SHOULD nest each set of related menuitemradio elements in an element using
     * the group role, and authors SHOULD delimit the group from other menu items
     * with an element using the separator role.
     * @see {@link https://www.w3.org/TR/wai-aria-1.1/#menuitemradio}
     *
     * @example
     * Only Radio Items
     * ```tsx
     * import { ReactElement, useState } from "react";
     * import { DropdownMenu, MenuItemRadio } from "@react-md/core";
     *
     * function Example(): ReactElement {
     *   const [value, setValue] = useState("value1");
     *
     *   return (
     *     <DropdownMenu id="dropdown-menu-id" buttonChildren="Button">
     *       <MenuItemRadio
     *         id="radio-1"
     *         checked={value === "value1"}
     *         onCheckedChange={() => setValue("value1")}
     *       >
     *          Radio 1
     *       </MenuItemRadio>
     *       <MenuItemRadio
     *         id="radio-2"
     *         checked={value === "value2"}
     *         onCheckedChange={() => setValue("value2")}
     *       >
     *         Radio 2
     *       </MenuItemRadio>
     *       <MenuItemRadio
     *         id="radio-3"
     *         checked={value === "value3"}
     *         onCheckedChange={() => setValue("value3")}
     *       >
     *         Radio 3
     *       </MenuItemRadio>
     *     </DropdownMenu>
     *   );
     * }
     * ```
     *
     * @example
     * With Other Items
     * ```tsx
     * import {
     *   DropdownMenu,
     *   MenuItemGroup,
     *   MenuItemRadio,
     *   MenuItemSwitch,
     *   MenuItemSeparator,
     * } from "@react-md/core";
     * import type { ReactElement } from "react";
     * import { useState } from "react";
     *
     * function Example(): ReactElement {
     *   const [value, setValue] = useState("value1");
     *
     *   return (
     *     <DropdownMenu buttonChildren="Button">
     *       <MenuItemSwitch
     *         checked={checked}
     *         onCheckedChange={nextChecked => setChecked(nextChecked)}
     *       >
     *         Light mode
     *       </MenuItemSwitch>
     *       <MenuItemSeparator />
     *       <MenuItemGroup aria-label="My Group Label">
     *         <MenuItemRadio
     *           checked={value === "value1"}
     *           onCheckedChange={() => setValue("value1")}
     *         >
     *           Radio 1
     *         </MenuItemRadio>
     *         <MenuItemRadio
     *           checked={value === "value2"}
     *           onCheckedChange={() => setValue("value2")}
     *         >
     *           Radio 2
     *         </MenuItemRadio>
     *         <MenuItemRadio
     *           checked={value === "value3"}
     *           onCheckedChange={() => setValue("value3")}
     *         >
     *           Radio 3
     *         </MenuItemRadio>
     *       </MenuItemGroup>
     *     </DropdownMenu>
     *   );
     * }
     * ```
     *
     * @remarks \@since 2.8.0
     */
    export const MenuItemRadio = forwardRef<HTMLLIElement, MenuItemRadioProps>(
      function MenuItemRadio(props, ref) {
        return <MenuItemInputToggle {...props} ref={ref} type="radio" />;
      }
    );