Basic Components
Phone Input
A component for inputting phone numbers with international prefix selection.
Usage 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
Properties
| Property | Basic component module for translation keys shared across all component documentation pages | 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 |
Events
| Event | Basic component module for translation keys shared across all component documentation pages | Parameters |
|---|---|---|
| update:phonePrefix | themeDocs.phoneInput.events.updatePhonePrefix | : : : : : : |
| update:phoneNumber | themeDocs.phoneInput.events.updatePhoneNumber | : : : : : : |
Design Empowers, Innovation Unlimited