Theme

Internationalization (i18n)

FormKit ships with internationalization support for all of its interfaces and validation messages.

Available languages

Currently, FormKit supports the following languages (in the @formkit/i18n package):

  • ๐Ÿ‡ฑ๐Ÿ‡พ Arabic (ar) โ€” ๐Ÿ™ย @Ahmedelforjani
  • ๐Ÿ‡ฆ๐Ÿ‡ฟ Azerbaijani (az) โ€” ๐Ÿ™ย @EmrullahKutlar
  • ๐Ÿ‡ง๐Ÿ‡ฌ Bulgarian (bg) โ€” ๐Ÿ™ย @ivanov1234159
  • Catalan flag (Senyera) Catalan (ca) โ€”ย ๐Ÿ™ย @petergithubmgw
  • ๐Ÿ‡จ๐Ÿ‡ณ Chinese (zh) โ€” ๐Ÿ™ย @myleslee
  • ๐Ÿ‡ญ๐Ÿ‡ท Croatian (hr) โ€” ๐Ÿ™ย @antemarkic
  • ๐Ÿ‡จ๐Ÿ‡ฟ Czech (cs) โ€” ๐Ÿ™ย @dfridrich
  • ๐Ÿ‡ฉ๐Ÿ‡ฐ Danish (da) โ€” ๐Ÿ™ย @bjerggaard
  • ๐Ÿ‡ณ๐Ÿ‡ฑ Dutch (nl) โ€” ๐Ÿ™ย @arjendejong12
  • ๐Ÿ‡บ๐Ÿ‡ธ English (en)
  • ๐Ÿ‡ซ๐Ÿ‡ฎ Finish - (fi) โ€” ๐Ÿ™ย @mihqusta
  • ๐Ÿ‡ซ๐Ÿ‡ท French (fr) โ€” ๐Ÿ™ย @HoreKk, @pop123123123
  • Frisian flag Frisian (fy) โ€” ๐Ÿ™ย @arjendejong12
  • ๐Ÿ‡ฉ๐Ÿ‡ช German (de) โ€” ๐Ÿ™ย @digitalkaoz, @tosling
  • ๐Ÿ‡ฌ๐Ÿ‡ท Greek (el) โ€” ๐Ÿ™ย @mendrinos
  • ๐Ÿ‡ฎ๐Ÿ‡ฑ Hebrew (he) - ๐Ÿ™ย @Hepi420
  • ๐Ÿ‡ญ๐Ÿ‡บ Hungarian (hu) โ€” ๐Ÿ™ย @KristofKekesi
  • ๐Ÿ‡ฎ๐Ÿ‡ฉ Indonesian (id) - ๐Ÿ™ย @rama-adi
  • ๐Ÿ‡ฎ๐Ÿ‡น Italian (it) - ๐Ÿ™ย @punga78, @Archetipo95
  • ๐Ÿ‡ฏ๐Ÿ‡ต Japanese (ja) - ๐Ÿ™ย @wonyx
  • ๐Ÿ‡ฐ๐Ÿ‡ฟ Kazakh (kk) - ๐Ÿ™ย @ilya-raevskiy
  • ๐Ÿ‡ฐ๐Ÿ‡ท Korean (ko) - ๐Ÿ™ย @bwp618, @titusdecali
  • ๐Ÿ‡ณ๐Ÿ‡ด Norwegian Bokmรฅl (nb) - ๐Ÿ™ย @hognevevle
  • ๐Ÿ‡ฎ๐Ÿ‡ท Persian (fa) - ๐Ÿ™ย @shahabbasian
  • ๐Ÿ‡ต๐Ÿ‡ฑ Polish (pl) - ๐Ÿ™ย @xxSkyy
  • ๐Ÿ‡ง๐Ÿ‡ท Portuguese (pt) ๐Ÿ™ย @r-martins, @dbomfim
  • ๐Ÿ‡ท๐Ÿ‡ด Romanian (ro) - ๐Ÿ™ย @danve
  • ๐Ÿ‡ท๐Ÿ‡บ Russian (ru) - ๐Ÿ™ย @andreimakushkin
  • ๐Ÿ‡ธ๐Ÿ‡ฐ Slovak (sk) - ๐Ÿ™ย @neridev
  • ๐Ÿ‡ธ๐Ÿ‡ฎ Slovenian (sl) - ๐Ÿ™ย @krisflajs
  • ๐Ÿ‡ท๐Ÿ‡ธ Serbian (sr) - ๐Ÿ™ย @milos5593
  • ๐Ÿ‡ฆ๐Ÿ‡ท Spanish (es) - ๐Ÿ™ย @inibg
  • ๐Ÿ‡ธ๐Ÿ‡ช Swedish (sv) - ๐Ÿ™ย @purung
  • ๐Ÿ‡น๐Ÿ‡ฏ Tajik (tg) - ๐Ÿ™ย @devixrootix
  • ๐Ÿ‡น๐Ÿ‡ญ Thai (th) - ๐Ÿ™ย @pknn
  • ๐Ÿ‡บ๐Ÿ‡ฆ Ukrainian (uk) - ๐Ÿ™ย @aresofficial
  • ๐Ÿ‡บ๐Ÿ‡ฟ Uzbek (uz) - ๐Ÿ™ย @root5427
  • ๐Ÿ‡น๐Ÿ‡ท Turkish (tr) - ๐Ÿ™ย @ragokan, @cemkaan
  • ๐Ÿ‡ป๐Ÿ‡ณ Vietnamese (vi) - ๐Ÿ™ย @oanhnn

Although flags are poor representations of languages (flags indicate a geographic nation, while languages can be spoken in many ares of the world), we use the flags in the list above to indicate the location of the contributor who created that particular locale.

Help others who speak your language!Contribute a locale

Using a locale

FormKitโ€™s defaultConfig includes the english locale by default โ€” to add an additional locale, import it from @formkit/i18n and append it to the locales option when you initialized the FormKit plugin. To set the active locale specify it with the locale option:

import { createApp } from 'vue'import App from 'App.vue'import { plugin, defaultConfig } from '@formkit/vue'import { de, fr, zh } from '@formkit/i18n'const app = createApp(App)app.use(  plugin,  defaultConfig({    // Define additional locales    locales: { de, fr, zh },    // Define the active locale    locale: 'fr',  }))app.mount('#app')

Changing the active locale

There are two ways to change your active locale:

  • Using this.$formkit.setLocale() from the Vue plugin (best for options API).
  • Directly modifying the root config object (best for composition API).

Using setLocale

When using Vueโ€™s options API, you have access to this.$formkit which contains setLocale('de') โ€” a purpose-built method that globally changes the current locale:

Load Live Example

Using root config

When using the composition API, you wonโ€™t have access to this.$formkit. Instead, you can fetch and modify the root FormKit configuration object. This is made available globally via Vueโ€™s inject mechanism and a unique Symbol:

Load Live Example

Overriding

If you find a phrase in your locale isnโ€™t worded the way you prefer, you can override those individual messages globally in your configuration. You can do this by providing a messages object to the defaultConfig:

import { createApp } from 'vue'import { plugin, defaultConfig } from '@formkit/vue'import App from 'App.vue'const app = createApp(App)app.use(  plugin,  defaultConfig({    messages: {      en: {        ui: {          submit: '๐Ÿš€ Launch',        },      },    },  }))
Message keys

Messages are generally found under a localeโ€™s ui or validation property. To see a full list of keys and messages checkout the english locale.

Adding your language

Writing a locale for a language you know is a great way to contribute to FormKit and an easy way to get started with open source too! We are always eager to see pull requests for new locales. To support this effort, weโ€™ve created a locale builder โ€” a small web app to make the translation process as easy as possible.

Help others who speak your language!Contribute a locale

Of course, you are not required to use our locale builder to submit a language, and are more than welcome to submit a standard pull request with your locale included.

Localization

If your language is already on the list (let's say English), but your locality speaks a variation of that language (like ๐Ÿ‡ฌ๐Ÿ‡ง en-GB), please feel free to submit your localized language.