Country Code4.0
Country code displays a country's dial code and optional name, typically used in phone number input fields.
Ads by Tryg Careers
Installation
npm i @tryg/vue-ui-libraryUsage
Install the component library as a Vue plugin. This globally registers all Anchor components.
import { createApp } from 'vue';
import { ComponentLibrary } from '@tryg/vue-ui-library';
import App from './App.vue';
const app = createApp(App);
app.use(ComponentLibrary);
app.mount('#app');<template>
<anchor-country-code dial-code="+45" iso="DK" name="Denmark"></anchor-country-code>
</template>Import only the components you need for optimal bundle size.
<script setup>
import { AnchorCountryCode } from '@tryg/vue-ui-library';
</script>
<template>
<anchor-country-code dial-code="+45" iso="DK" name="Denmark"></anchor-country-code>
</template>Display Options
The show-name prop controls whether the country name is displayed alongside the dial code. By default it is true. Set it to false to display only the dial code.
<template>
<anchor-country-code dial-code="+45" iso="DK" name="Denmark" :show-name="false"></anchor-country-code>
</template>Accessibility
When the country name is hidden using :show-name="false", ensure the country identifier is still conveyed to assistive technologies. Consider adding an aria-label that includes both the country name and dial code so screen readers can properly communicate the selected country.
API
anchor-country-code
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
dialCode | dial-code | string | undefined | |
iso | iso | string | undefined | |
name | name | string | undefined | |
showName | show-name | boolean | true |
Dependencies
Used by
Graph
graph TD;
anchor-phone --> anchor-country-code
style anchor-country-code fill:#f9f,stroke:#333,stroke-width:4pxBuilt with StencilJS