Text Field A macOS single-line text field (NSTextField). The focus ring appears on any focus, keyboard or pointer — the macOS behavior for text input. There is no built-in label: pair the field with your own label element or an aria-label.
Preview Code
Copy
vue < script setup lang = "ts" > import { MacTextField } from '@macvue/core' import { ref } from 'vue' const name = ref ( '' ) </ script > < template > < MacTextField v-model = " name " aria-label = "Name" placeholder = "Name" style = " width : 220 px " /> </ template > Usage vue < script setup lang = "ts" > import { MacTextField } from '@macvue/core' import { ref } from 'vue' const name = ref ( '' ) </ script > < template > < MacTextField v-model = " name " aria-label = "Name" /> </ template > Labelling The field ships without a built-in label — NSTextField labels are separate elements. Pair it with a <label for>: the id falls through to the inner input.
Preview Code
Copy
vue < script setup lang = "ts" > import { MacTextField } from '@macvue/core' import { ref } from 'vue' const server = ref ( '' ) </ script > < template > < div style = " display : flex ; align-items : center ; gap : 8 px " > < label for = "demo-server" style = " font-size : 13 px " >Server:</ label > < MacTextField id = "demo-server" v-model = " server " placeholder = "smb://" style = " width : 200 px " /> </ div > </ template > Placeholder Native attributes such as autocomplete, readonly and maxlength fall through to the inner <input>; class and style land on the wrapper.
Preview Code
Copy
vue < script setup lang = "ts" > import { MacTextField } from '@macvue/core' </ script > < template > < MacTextField aria-label = "Email" placeholder = "[email protected] " autocomplete = "email" style = " width : 220 px " /> </ template > Sizes All five macOS control sizes; regular is the default.
Preview Code
Copy
vue < script setup lang = "ts" > import type { MacControlSize } from '@macvue/core' import { MacTextField } from '@macvue/core' 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 ; " > < MacTextField v-for = " item in sizes " : key = " item.size " : size = " item.size " : aria-label = " item.label " : placeholder = " item.label " style = " width : 220 px " /> </ div > </ template > Disabled Preview Code
Copy
vue < script setup lang = "ts" > import { MacTextField } from '@macvue/core' </ script > < template > < div style = " display : flex ; flex-direction : column ; gap : 12 px " > < MacTextField disabled aria-label = "Disabled empty" placeholder = "Disabled" style = " width : 220 px " /> < MacTextField disabled model-value = "Read-only value" aria-label = "Disabled with value" style = " width : 220 px " /> </ div > </ template > API Props Prop Type Default modelValue (v-model)string— defaultValuestring— size'extra-large' | 'large' | 'regular' | 'small' | 'mini''regular'disabledbooleanfalseplaceholderstring— namestring— requiredbooleanfalse
With name set, the field participates in native form submission.
Events Event Payload update:modelValuestring
Exposed Name Type Description elRef<HTMLInputElement | null>The underlying input element. focus() => voidFocuses the input. blur() => voidRemoves focus from the input.