AsPhoneNumberInput

A phone number input component with mask formatting.

Introduction

MAsPhoneNumberInput is a phone number input component that automatically formats numbers through input masks, supporting custom masks and dial-code prefix display.

Built on Nuxt UI's Input component, using maska for input masking

Usage

# represents a digit placeholder. The default mask is ### #### #### with dial code +86 (China mainland format).

+86

<script setup lang="ts">
const value = ref("")
</script>

<template>
  <MAsPhoneNumberInput v-model="value" />
</template>

`dialCode` Dial Code

Use dialCode to display a country or region dial code in front of the input:

dialCode

<template>
  <MAsPhoneNumberInput dial-code="+1" />
</template>

`mask` Mask

Use mask to adapt number formats for different countries. # represents a digit placeholder:

mask

+86

<template>
  <MAsPhoneNumberInput mask="(###) ###-####" />
</template>

Examples

Inside `UFieldGroup`

When placed alongside a button inside UFieldGroup, they share size, border-radius, and border connection — ideal for combined dial operations:

size

<template>
  <UFieldGroup size="xs">
    <MAsPhoneNumberInput dial-code="+1" />
    <UButton icon="i-lucide-phone-call" color="neutral" variant="subtle" />
  </UFieldGroup>
</template>

Prop	Default	Type
`as`	`'div'`	`any` The element or component this component should render as.
`mask`	`'(###) ###-####'`	`string` 输入掩码格式，`#` 表示一个数字位。
`dialCode`	`'+86'`	`string` 区号前缀
`id`		`string`
`name`		`string`
`placeholder`		`string` The placeholder text when the input is empty.
`color`	`'primary'`	`"primary" \| "secondary" \| "info" \| "success" \| "warning" \| "error" \| "important" \| "neutral"`
`variant`	`'outline'`	`"outline" \| "soft" \| "subtle" \| "ghost" \| "none"`
`size`	`'md'`	`"xs" \| "sm" \| "md" \| "lg" \| "xl"`
`autocomplete`		`"on" \| "off" \| string & {}`
`autofocusDelay`		`number`
`defaultValue`		`T`
`modelModifiers`		`ModelModifiers`
`icon`		`any` Display an icon based on the `leading` and `trailing` props.
`avatar`		`AvatarProps` Display an avatar on the left side.
`leadingIcon`		`any` Display an icon on the left side.
`trailingIcon`		`any` Display an icon on the right side.
`loadingIcon`	`appConfig.ui.icons.loading`	`any` The icon when the `loading` prop is `true`.
`list`		`string`
`max`		`string \| number`
`maxlength`		`string \| number`
`min`		`string \| number`
`minlength`		`string \| number`
`pattern`		`string`
`readonly`		`false \| true \| "true" \| "false"`
`step`		`string \| number`
`modelValue`		`T`
`required`		`boolean`
`autofocus`		`boolean`
`disabled`		`boolean`
`highlight`		`boolean` Highlight the ring color like a focus state.
`fixed`		`boolean` Keep the mobile text size on all breakpoints.
`leading`		`boolean` When `true`, the icon will be displayed on the left side.
`trailing`		`boolean` When `true`, the icon will be displayed on the right side.
`loading`		`boolean` When `true`, the loading icon will be displayed.
`ui`		`Record<string, ClassNameValue> & { root?: SlotClass; base?: SlotClass; leading?: SlotClass; leadingIcon?: SlotClass; leadingAvatar?: SlotClass; leadingAvatarSize?: SlotClass; trailing?: SlotClass; trailingIcon?: SlotClass; dialCode?: SlotClass; }`

Event	Type
`update:modelValue`	`[value: T]`
`blur`	`[event: FocusEvent]`
`change`	`[event: Event]`

default { ui: { root: (props?: Record<string, any>) => string; base: (props?: Record<string, any>) => string; leading: (props?: Record<string, any>) => string; leadingIcon: (props?: Record<string, any>) => string; leadingAvatar: (props?: Record<string, any>) => string; leadingAvatarSize: (props?: Record<string, any>) => string; trailing: (props?: Record<string, any>) => string; trailingIcon: (props?: Record<string, any>) => string; }; }

trailing { ui: { root: (props?: Record<string, any>) => string; base: (props?: Record<string, any>) => string; leading: (props?: Record<string, any>) => string; leadingIcon: (props?: Record<string, any>) => string; leadingAvatar: (props?: Record<string, any>) => string; leadingAvatarSize: (props?: Record<string, any>) => string; trailing: (props?: Record<string, any>) => string; trailingIcon: (props?: Record<string, any>) => string; }; }

Slot	Type
`default`	`{ ui: { root: (props?: Record<string, any>) => string; base: (props?: Record<string, any>) => string; leading: (props?: Record<string, any>) => string; leadingIcon: (props?: Record<string, any>) => string; leadingAvatar: (props?: Record<string, any>) => string; leadingAvatarSize: (props?: Record<string, any>) => string; trailing: (props?: Record<string, any>) => string; trailingIcon: (props?: Record<string, any>) => string; }; }`
`trailing`	`{ ui: { root: (props?: Record<string, any>) => string; base: (props?: Record<string, any>) => string; leading: (props?: Record<string, any>) => string; leadingIcon: (props?: Record<string, any>) => string; leadingAvatar: (props?: Record<string, any>) => string; leadingAvatarSize: (props?: Record<string, any>) => string; trailing: (props?: Record<string, any>) => string; trailingIcon: (props?: Record<string, any>) => string; }; }`

Theme

app.config.ts

export default defineAppConfig({
  ui: {
    asPhoneNumberInput: {
      slots: {
        base: '',
        leading: '',
        dialCode: ''
      },
      variants: {
        dialCode: {
          true: {
            base: 'ps-(--dial-code-length)',
            leading: 'pointer-events-none text-muted'
          }
        }
      }
    }
  }
})

Changelog

No recent changes

Agent Skills

Use Claude Agent Skills to help AI coding agents generate correct Movk Nuxt code by capability domain.

ColorChooser

A visual color picker component.