Radio button

open_in_newmaterial docs

• Use radio buttons (not switches) when only one item can be selected from a list
• Label should be scannable
• Selected items are more prominent than unselected items

Basic usage

m-radio component can be used on its own, but we strongly recommend you use radios in pair with m-radio-group, that creates default radio buttons single choice behavior

radio_button_unchecked

option 1

radio_button_unchecked

option 2

code

vue template

<m-radio-group v-model="radioValue">
    <m-radio value="1" text="option 1"/>
    <m-radio value="2" text="option 2"/>
</m-radio-group>

script setup

import {ref} from "vue"; 

const radioValue = ref(null)