Skip to main content
Version: 5.x


A collection of radio buttons describing a set of related options. Only one radio button in a group can be selected at the same time.


Vime settings menu radio group component


<!-- ... -->
<!-- ... -->
<vm-menu-item label="Playback Quality" hint="Auto"></vm-menu-item>


badgeThis can provide additional context about the value of a menu item. For example, if the item is a radio button for a set of video qualities, the badge could describe whether the quality is UHD, HD etc. If hint is shown, badge is not shown.string ∣ undefinedundefined
checkIconThe name of the checkmark icon to resolve from the icon library.string ∣ undefined'check'
checkedIf this item is to behave as a radio button, then this property determines whether the radio is selected or not. Sets the aria-checked property.boolean ∣ undefinedundefined
expandedIf the item has a popup menu, this indicates whether the menu is open or not. Sets the aria-expanded property.boolean ∣ undefinedundefined
hiddenWhether the item is displayed or not.booleanfalse
hintThis can provide additional context about some underlying state of the item. For example, if the menu item opens/closes a submenu with options, the hint could be the currently selected option. If checked is defined, hint is not shown.string ∣ undefinedundefined
iconsThe name of an icon library to use. Defaults to the library defined by the icons player property.string ∣ undefinedundefined
identifierThe id attribute of the item.string ∣ undefinedundefined
label (required)The label/title of the item.stringundefined
menuIf the item has a popup menu, then this should be a reference to it.HTMLVmMenuElement ∣ undefinedundefined


blurItemRemoves focus from the menu item.blurItem() => Promise<void>
focusItemFocuses the menu item.focusItem() => Promise<void>
getHeightReturns the height of the menu item.getHeight() => Promise<number>


vmBlurEmitted when the item loses focus.CustomEvent<void>
vmFocusEmitted when the item is focused.CustomEvent<void>

CSS Custom Properties#

--vm-menu-item-arrow-colorThe color of the left/right arrow on a navigational menu item.
--vm-menu-item-badge-bgThe background color of the badge.
--vm-menu-item-badge-colorThe color of the badge text.
--vm-menu-item-badge-font-sizeThe font size of the the badge text.
--vm-menu-item-check-icon-sizeThe width of the checked icon.
--vm-menu-item-divider-colorThe color of the divider between a navigational menu item and the menu body.
--vm-menu-item-focus-bgThe background color of a menu item when it is being focused or hovered on.
--vm-menu-item-focus-colorThe color of a menu item's text when it is being focused or hovered on.
--vm-menu-item-hint-colorThe color of the hint text.
--vm-menu-item-hint-font-sizeThe font size of the hint text.
--vm-menu-item-hint-opacityThe opacity of the hint text.
--vm-menu-item-paddingThe padding within each menu item.
--vm-menu-item-tap-highlightThe highlight color when a menu item is tapped.


Used by#

Depends on#