- 1.5.0

Menu Item Checkbox

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

Read more Read less

See also menu_item/1.

Maturity: Developing

Missing features

  • State management: the component renders aria-checked from the 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" label="Actions">
  <:item>
    <.menu_item_checkbox on_click={JS.dispatch("myapp:toggle-word-wrap")}>
      Word wrap
    </.menu_item_checkbox>
  </:item>
</.menu>
Default
Open in playground 
<.menu id="menu-menu-item-checkbox-single-default" label="Actions">
  <:item>
    <.menu_item_checkbox
      on_click={%JS{ops: [["toggle_attr", %{attr: ["aria-checked", "true", "false"]}]]}}
    >
      Word wrap
    </.menu_item_checkbox>
  </:item>
</.menu>
Checked
Open in playground 
<.menu id="menu-menu-item-checkbox-single-checked" label="Actions">
  <:item>
    <.menu_item_checkbox
      checked
      on_click={%JS{ops: [["toggle_attr", %{attr: ["aria-checked", "true", "false"]}]]}}
    >
      Word wrap
    </.menu_item_checkbox>
  </:item>
</.menu>
Indeterminate
Open in playground

checked={:indeterminate} is for an item that stands for a group of items of which only some are checked. Clicking it here checks it, and later clicks toggle it.

<.menu id="menu-menu-item-checkbox-single-indeterminate" label="Actions">
  <:item>
    <.menu_item_checkbox
      checked={:indeterminate}
      on_click={%JS{ops: [["toggle_attr", %{attr: ["aria-checked", "true", "false"]}]]}}
    >
      All notifications
    </.menu_item_checkbox>
  </:item>
</.menu>