Version: 5.x
vm-menu-radio-group
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.
Visual#

Usage#
- HTML
- React
- Vue
- Svelte
- Stencil
- Angular
<vm-player>
<!-- ... -->
<vm-ui>
<!-- ... -->
<vm-settings>
<vm-submenu label="Playback Rate">
<vm-menu-radio-group value="1">
<vm-menu-radio label="0.5" value="0.5" />
<vm-menu-radio label="Normal" value="1" />
<vm-menu-radio label="2" value="2" />
</vm-menu-radio-group>
</vm-submenu>
</vm-settings>
</vm-ui>
</vm-player>
import React, { useState } from 'react';
import {
Player,
Ui,
Settings,
Submenu,
MenuRadioGroup,
MenuRadio,
} from '@vime/react';
function Example() {
const [value, setValue] = useState('1');
const onValueChange = (event: Event) => {
const radio = event.target as HTMLVmMenuRadioElement;
setValue(radio.value);
};
return (
<Player>
{/* ... */}
<Ui>
{/* ... */}
<Settings>
<Submenu label="Playback Rate">
<MenuRadioGroup value={value} onVmCheck={onValueChange}>
<MenuRadio label="0.5" value="0.5" />
<MenuRadio label="Normal" value="1" />
<MenuRadio label="2" value="2" />
</MenuRadioGroup>
</Submenu>
</Settings>
</Ui>
</Player>
);
}
example.vue
<template>
<Player>
<!-- ... -->
<Ui>
<!-- ... -->
<Settings>
<Submenu label="Playback Rate">
<MenuRadioGroup :value="value" @vmCheck="onValueChange($event)">
<MenuRadio label="0.5" value="0.5" />
<MenuRadio label="Normal" value="1" />
<MenuRadio label="2" value="2" />
</MenuRadioGroup>
</Submenu>
</Settings>
</Ui>
</Player>
</template>
<script>
import {
Player,
Ui,
Settings,
Submenu,
MenuRadioGroup,
MenuRadio,
} from "@vime/vue";
export default {
components: {
Player,
Ui,
Settings,
Submenu,
MenuRadioGroup,
MenuRadio,
},
data: {
value: 1,
},
methods: {
onValueChange(event) {
const radio = event.target as HTMLVmMenuRadioElement;
this.value = radio.value;
},
},
};
</script>
<Player>
<!-- ... -->
<Ui>
<!-- ... -->
<Settings>
<Submenu label="Playback Rate">
<MenuRadioGroup value={value} on:vmCheck={onValueChange}>
<MenuRadio label="0.5" value="0.5" />
<MenuRadio label="Normal" value="1" />
<MenuRadio label="2" value="2" />
</MenuRadioGroup>
</Submenu>
</Settings>
</Ui>
</Player>
<script lang="ts">
import {
Player,
Ui,
Settings,
Submenu,
MenuRadioGroup,
MenuRadio,
} from '@vime/svelte';
let value = '1';
const onValueChange = (event: Event) => {
const radio = event.target as HTMLVmMenuRadioElement;
value = radio.value;
};
</script>
class Example {
@State() value = '1';
private onValueChange(event: Event) {
const radio = event.target as HTMLVmMenuRadioElement;
this.value = radio.value;
}
render() {
return (
<vm-player>
{/* ... */}
<vm-ui>
{/* ... */}
<vm-settings>
<vm-submenu label="Playback Rate">
<vm-menu-radio-group
value={this.value}
onVmCheck={this.onValueChange.bind(this)}
>
<vm-menu-radio label="0.5" value="0.5" />
<vm-menu-radio label="Normal" value="1" />
<vm-menu-radio label="2" value="2" />
</vm-menu-radio-group>
</vm-submenu>
</vm-settings>
</vm-ui>
</vm-player>
);
}
}
example.html
<vm-player>
<!-- ... -->
<vm-ui>
<!-- ... -->
<vm-settings>
<vm-submenu label="Playback Rate">
<vm-menu-radio-group [value]="value" (vmCheck)="onValueChange($event)">
<vm-menu-radio label="0.5" value="0.5" />
<vm-menu-radio label="Normal" value="1" />
<vm-menu-radio label="2" value="2" />
</vm-menu-radio-group>
</vm-submenu>
</vm-settings>
</vm-ui>
</vm-player>
example.ts
import { MenuRadio } from '@vime/angular';
class Example {
value = '1';
onValueChange(event: Event) {
const radio = event.target as MenuRadio;
this.value = radio.value;
}
}
Properties#
Property | Description | Type | Default |
---|---|---|---|
value | The current value selected for this group. | string โฃ undefined | undefined |
Events#
Event | Description | Type |
---|---|---|
vmCheck | Emitted when a new radio button is selected for this group. | CustomEvent<void> |
Slots#
Slot | Description |
---|---|
Used to pass in radio buttons (vm-menu-radio ). |