Vanilla ComponentsCountry Input
A <RichSelect /> made only to pick a list of countries with beautiful flags for each country. Add your favorite countries & search for other countries.
Preview & Playground 🖼️
Here you may find a preview of the component, with error & possible variants.
🏄 Click to expand the code
<script setup lang="ts">
import { CountryInput } from '@flavorly/vanilla-components'
import { ref } from 'vue'
const value = ref('PT')
const valueErrors = ref('US')
</script>
<template>
<PreviewWrapper>
<div class="grid space-y-2">
<!-- Regular -->
<CountryInput
v-model="value"
placeholder="Simple with icon"
feedback="You can add SVGs as addons before & After"
/>
<!-- Errors -->
<CountryInput
v-model="valueErrors"
placeholder="Elon Musk"
feedback="Im showing only because you cleared errors"
errors="We have a problem Musk, Abort! Write to clear"
/>
</div>
</PreviewWrapper>
</template>
Props 📥
Props available for this component extending the default variant & global props.
| Prop | Description | Accepted Values | Default |
|---|---|---|---|
modelValue | The value for the element | Any, Valid Country ISO Code | undefined |
favoriteCountries | Array of favorite countries to preload | Array | ['us','gb','pt','fr','de'] |
labelWithDialCode | If you want the label with a dial code | Boolean | false |
labelWithCountryCode | If you want the label with country code | Boolean | false |
searchBoxPlaceholder | Placeholder for the Search Box | string | Search here |
noResultsText | When no results are found, the text to display | string | Sorry... |
searchingText | Text to display while searching | string | Please wait... |
loadingClosedPlaceholder | When loading but dropdown closed | string | Loading please wait... |
loadingMoreResultsText | Text while is pulling for next pages | string | Loading more options... |
minimumInputLengthText | A function or a number with the minimum chars to search | String, Function | 3 |
Slots 🧬
Current slots available for this component are the following:
Slot label
The slot that will be used for the label of the country, for the current selected option and when closed
| Attribute | Description | Type |
|---|---|---|
option | The given option | Object |
className | The current class name | String |
Slot option
The slot for the option on the select dropdown.
| Attribute | Description | Type |
|---|---|---|
option | The given option | Object |
className | The current class name | String |
isSelected | If the current option is selected | Boolean |
Slot before
Slot to override or pre-pend to the component before the component, ex: icon, etc.
| Attribute | Description | Type |
|---|---|---|
className | Classes injected | String |
Slot after
Slot to override or append to the component before the component, ex: icon, etc.
Attributes specially injected to the after slot for some inputs ( Ex: Password )
| Attribute | Description | Type |
|---|---|---|
hasErrors | If the field has errors | Boolean |
type | Type of input | String |
showingPassword | If the password showing is toggled | Boolean |
Slot errors
Slot that holds the error messages when the component errors prop is defined.
| Attribute | Description | Type |
|---|---|---|
errors | The errors being injected | [String, Array] |
hasErrors | If the field has errors | Boolean |
Slot feedback
Slot that holds the feedback messages when the component feedback prop is defined. When showing errors the feedback will be hidden by default, and vice-versa.
| Attribute | Description | Type |
|---|---|---|
errors | The errors being injected | [String, Array, Undefined] |
feedback | The feedback message | [String, Undefined] |
Events 🚇
Here you may find the events emitted by this component.
| Event | Description | Value |
|---|---|---|
update:modelValue | When the value changes | any |
| update:countryDialCode | The country dial code | string | | update:countryCode | The ISO country code | string | | update:countryName | The English name of the country | string |
Additional Components
You may also find additional components like CountryOption & CountryFlag, they bootstrap the current component, but you may use them standalone The Country input is just a mix of the Rich Select & the Country Option. I will not bother document there here for the time being, as it find it useless.