Segmented Control A macOS segmented control (NSSegmentedControl). Segments share the container width equally — the AppKit default distribution. In single mode the accent selection slides between segments; a selected segment cannot be deselected by clicking it again, matching AppKit. Tahoe has a single visual style, so there is no variant; momentary (button-like) segments are not modeled — use MacButtons for that. Arrow keys move focus between segments; Space or Enter selects the focused segment.
Preview Code
Copy
vue < script setup lang = "ts" > import { MacSegment, MacSegmentedControl } from 'macvue' import { ref } from 'vue' const view = ref ( 'list' ) </ script > < template > < MacSegmentedControl v-model = " view " aria-label = "View" > < MacSegment value = "list" > List </ MacSegment > < MacSegment value = "icons" > Icons </ MacSegment > < MacSegment value = "columns" > Columns </ MacSegment > </ MacSegmentedControl > </ template > Usage vue < script setup lang = "ts" > import { MacSegment, MacSegmentedControl } from 'macvue' import { ref } from 'vue' const view = ref ( 'list' ) </ script > < template > < MacSegmentedControl v-model = " view " aria-label = "View" > < MacSegment value = "list" > List </ MacSegment > < MacSegment value = "icons" > Icons </ MacSegment > </ MacSegmentedControl > </ template > Multiple type="multiple" switches the model to an array (selectAny in AppKit). Selected segments can be toggled off; there is no sliding pill.
Preview Code
Copy
vue < script setup lang = "ts" > import { MacSegment, MacSegmentedControl } from 'macvue' import { ref } from 'vue' const styles = ref ([ 'bold' ]) </ script > < template > < MacSegmentedControl v-model = " styles " type = "multiple" aria-label = "Text style" > < MacSegment value = "bold" > B </ MacSegment > < MacSegment value = "italic" > I </ MacSegment > < MacSegment value = "underline" > U </ MacSegment > </ MacSegmentedControl > </ template > Sizes All five macOS control sizes; regular is the default. Large and extra-large are capsules.
Preview Code
Day Week Month
Day Week Month
Day Week Month
Day Week Month
Copy
vue < script setup lang = "ts" > import type { MacControlSize } from 'macvue' import { MacSegment, MacSegmentedControl } from 'macvue' const sizes : MacControlSize [] = [ 'extra-large' , 'large' , 'regular' , 'small' , 'mini' , ] </ script > < template > < div style = " display : flex ; flex-direction : column ; align-items : flex-start ; gap : 12 px ; " > < MacSegmentedControl v-for = " size in sizes " : key = " size " : size = " size " default-value = "day" : aria-label = "`Range (${ size })`" > < MacSegment value = "day" > Day </ MacSegment > < MacSegment value = "week" > Week </ MacSegment > < MacSegment value = "month" > Month </ MacSegment > </ MacSegmentedControl > </ div > </ template > Disabled Disable the whole group or individual segments.
Preview Code
List Icons
List Icons Columns
Copy
vue < script setup lang = "ts" > import { MacSegment, MacSegmentedControl } from 'macvue' </ script > < template > < div style = " display : flex ; flex-direction : column ; align-items : flex-start ; gap : 12 px ; " > < MacSegmentedControl disabled default-value = "list" aria-label = "Disabled group" > < MacSegment value = "list" > List </ MacSegment > < MacSegment value = "icons" > Icons </ MacSegment > </ MacSegmentedControl > < MacSegmentedControl default-value = "list" aria-label = "Disabled segment" > < MacSegment value = "list" > List </ MacSegment > < MacSegment value = "icons" disabled > Icons </ MacSegment > < MacSegment value = "columns" > Columns </ MacSegment > </ MacSegmentedControl > </ div > </ template > API MacSegmentedControl Props Prop Type Default modelValue (v-model)string | string[]— defaultValuestring | string[]— type'single' | 'multiple''single'size'extra-large' | 'large' | 'regular' | 'small' | 'mini''regular'disabledbooleanfalsenamestring—
With name set, hidden inputs carry the selection in native form submission.
MacSegmentedControl Events Event Payload update:modelValuestring | string[]
MacSegmentedControl Exposed Name Type Description elRef<HTMLElement | null>The group element. focus() => voidFocuses the current segment. blur() => voidRemoves focus from the group.
MacSegment Props Prop Type Default valuestring— (required) disabledbooleanfalse
MacSegment Slots Slot Description defaultSegment label content.
MacSegment Exposed Name Type Description elRef<HTMLButtonElement | null>The underlying segment button. focus() => voidFocuses the segment. blur() => voidRemoves focus from the segment.