- 1.5.0

Menu Item Radio Group

Renders a group of menu item radios as part of a menu/1 or menu_bar/1.

Read more Read less

See also menu_button/1, menu_item/1, and menu_item_checkbox/1.

Maturity: Developing

Missing features

  • State management: the component renders aria-checked from each item's checked attribute and never changes it, so the caller's on_click has to update the state and re-render.

Usage

<.menu id="actions-menu" labelledby="actions-button" hidden>
  <:item>
    <.menu_item_radio_group label="Theme">
      <:item on_click={JS.dispatch("switch-theme-light")}>
        Light
      </:item>
      <:item on_click={JS.dispatch("switch-theme-dark")} checked>
        Dark
      </:item>
    </.menu_item_radio_group>
  </:item>
</.menu>
Default
Open in playground 
<div id="theme-options">
  <.menu id="menu-menu-item-radio-group-single-default" label="Actions">
    <:item>
      <.menu_item_radio_group label="Theme">
        <:item checked
          on_click={
            JS.set_attribute({"aria-checked", "false"},
              to: "#theme-options [role='menuitemradio']"
            )
            |> JS.set_attribute({"aria-checked", "true"})
            |> JS.dispatch("switch-theme-light")
          }
        >Light</:item>
        <:item
          on_click={
            JS.set_attribute({"aria-checked", "false"},
              to: "#theme-options [role='menuitemradio']"
            )
            |> JS.set_attribute({"aria-checked", "true"})
            |> JS.dispatch("switch-theme-dark")
          }
        >Dark</:item>
      </.menu_item_radio_group>
    </:item>
  </.menu>
</div>