Theme Documentation
Phone Input
A component for inputting phone numbers with international prefix selection.
Component Examples
Basic Example
Basic usage example, showing the default phone input.
300px
Preset Value
You can preset a phone number using the model-value property.
300px
Form Integration
Example of using the phone input in a form.
300px
Features
- Supports international prefix selection
- Includes common country/region codes
- Supports prefix search
- Supports custom styling and theming
- Supports form validation
Component Properties
| Property | Description | Type | Default |
|---|---|---|---|
| id | The ID of the input field, defaults to 'phone' | string | phone |
| phonePrefix / v-model:phonePrefix | themeDocs.phoneInput.props.phonePrefix | string | '86' |
| phoneNumber / v-model:phoneNumber | themeDocs.phoneInput.props.phoneNumber | string | '' |
| required | Whether the field is required | boolean | false |
Component Events
| Event | Description | Parameters |
|---|---|---|
| update:phonePrefix | themeDocs.phoneInput.events.updatePhonePrefix | : : : : : : |
| update:phoneNumber | themeDocs.phoneInput.events.updatePhoneNumber | : : : : : : |
Design Empowers, Innovation Unlimited