Key pad menu

---

The EuiKeyPadMenu component presents EuiKeyPadMenuItems in a tiled format, with a fixed width which will accommodate three items and then wrap.

EuiKeyPadMenu is just a wrapping element for creating the list elements but you must declare each EuiKeyPadMenu component manually.

warning

If the menu provides navigation for your application, wrap the EuiKeyPadMenu with <nav aria-label="Nav title"></nav>.

Menu item

The EuiKeyPadMenuItem component can act both as an anchor as well as a button by specifying href or onClick respectively. It requires a text-based label and children for declaring the icon. This is the most flexible way for handling the customization of the icon itself.

When using the isSelected prop to create a toggle button, you must supply both the true and false states explicitly to ensure the attribute is added for both states.

Beta item

If the item links to a module that is not GA (beta, lab, etc), you can add a betaBadgeLabel and betaBadgeTooltipContent to the card and it will properly create and position an EuiBetaBadge.

Supplying just a label will only show the first letter in the badge but displays the full label to the tooltip. You can also pass an iconType to replace the letter.

Checkable

EuiKeyPadMenuItems can also be rendered as checkbox or radio form controls using the checkable prop. Pass in "multi" for checkboxes or "single" for radios.

To ensure the EuiKeyPadMenu renders the semantically appropriate HTML elements, you will need to pass in the checkable prop as true or an object that requires a legend. This will wrap the input group in a <fieldset> with a <legend>.

For single selection (radio) items, you must pass a singular name prop to each item to ensure they are grouped properly. Also, if you would like to hide the visible <legend> in favor of an screen-reader only solution, you can pass ariaLegend instead of legend.