Radio Group A group of macOS radio buttons (NSButton .radio). Exactly one option is selected at a time; arrow keys move both focus and selection, and clicking a caption selects its radio.
Preview Code
Copy
vue < script setup lang = "ts" > import { MacRadio, MacRadioGroup } from 'macvue' import { ref } from 'vue' const sortBy = ref ( 'name' ) </ script > < template > < MacRadioGroup v-model = " sortBy " aria-label = "Sort by" > < MacRadio value = "name" > Name </ MacRadio > < MacRadio value = "kind" > Kind </ MacRadio > < MacRadio value = "date" > Date modified </ MacRadio > </ MacRadioGroup > </ template > Usage vue < script setup lang = "ts" > import { MacRadio, MacRadioGroup } from 'macvue' import { ref } from 'vue' const sortBy = ref ( 'name' ) </ script > < template > < MacRadioGroup v-model = " sortBy " aria-label = "Sort by" > < MacRadio value = "name" > Name </ MacRadio > < MacRadio value = "kind" > Kind </ MacRadio > </ MacRadioGroup > </ template > Orientation The group is vertical by default; set orientation="horizontal" for a row.
Preview Code
Copy
vue < script setup lang = "ts" > import { MacRadio, MacRadioGroup } from 'macvue' </ script > < template > < MacRadioGroup default-value = "left" orientation = "horizontal" aria-label = "Text alignment" > < MacRadio value = "left" > Left </ MacRadio > < MacRadio value = "center" > Center </ MacRadio > < MacRadio value = "right" > Right </ MacRadio > </ MacRadioGroup > </ template > Sizes All five macOS control sizes; regular is the default. Like controlSize in AppKit, size is set on the group and inherited by every MacRadio in it — individual radios have no size prop.
Preview Code
Large Option
Regular Option
Small Option
Mini Option
Copy
vue < script setup lang = "ts" > import type { MacControlSize } from 'macvue' import { MacRadio, MacRadioGroup } from 'macvue' const sizes : { size : MacControlSize , label : string }[] = [ { size: 'extra-large' , label: 'Extra large' }, { size: 'large' , label: 'Large' }, { size: 'regular' , label: 'Regular' }, { size: 'small' , label: 'Small' }, { size: 'mini' , label: 'Mini' }, ] </ script > < template > < div style = " display : flex ; flex-direction : column ; align-items : flex-start ; gap : 12 px ; " > < MacRadioGroup v-for = " item in sizes " : key = " item.size " : size = " item.size " default-value = "on" orientation = "horizontal" : aria-label = "`${ item . label } radios`" > < MacRadio value = "on" > {{ item.label }} </ MacRadio > < MacRadio value = "off" > Option </ MacRadio > </ MacRadioGroup > </ div > </ template > Disabled Disable the whole group or individual radios.
Preview Code
Disabled group Second
Enabled item Disabled item
Copy
vue < script setup lang = "ts" > import { MacRadio, MacRadioGroup } from 'macvue' </ script > < template > < div style = " display : flex ; gap : 32 px " > < MacRadioGroup default-value = "first" disabled aria-label = "Disabled group" > < MacRadio value = "first" > Disabled group </ MacRadio > < MacRadio value = "second" > Second </ MacRadio > </ MacRadioGroup > < MacRadioGroup default-value = "first" aria-label = "Group with disabled item" > < MacRadio value = "first" > Enabled item </ MacRadio > < MacRadio value = "second" disabled > Disabled item </ MacRadio > </ MacRadioGroup > </ div > </ template > API MacRadioGroup Props Prop Type Default modelValue (v-model)string— defaultValuestring— size'extra-large' | 'large' | 'regular' | 'small' | 'mini''regular'disabledbooleanfalseorientation'vertical' | 'horizontal''vertical'namestring— requiredbooleanfalse
orientation only affects the layout: all four arrow keys move the selection either way, as the ARIA radio-group pattern prescribes. With name set, the group renders a hidden input inside a <form> and participates in native form submission.
MacRadioGroup Events Event Payload update:modelValuestring
MacRadioGroup Slots Slot Description defaultMacRadio items.
MacRadioGroup Exposed Name Type Description elRef<HTMLElement | null>The group element. focus() => voidFocuses the current radio in the group. blur() => voidRemoves focus from the group.
MacRadio Props Prop Type Default valuestring— (required) disabledbooleanfalse
MacRadio Slots Slot Description defaultRadio caption.
MacRadio Exposed Name Type Description elRef<HTMLButtonElement | null>The underlying radio button. focus() => voidFocuses the radio. blur() => voidRemoves focus from the radio.