CropWatch User Interface

CwLanguageSwitcher

Paraglide-ready locale picker that accepts an array of language options and calls the consumer's setLocale runtime function.

This demo app does not ship with Paraglide, so the live example below uses a stub callback that behaves like the runtime setter. The copy-paste example shows the real Paraglide import.

Live locale handoff

Bind the current locale and hand in Paraglide's setter.

The component updates its selected state immediately, then awaits the consumer callback so your app can swap messages, routes, or persisted preferences.

Language

Weekly summary

Your irrigation schedule is on track.

Sensors are stable, forecasts are favorable, and no immediate interventions are required.

Current locale en Last applied en

<script lang="ts">
	import {
		CwLanguageSwitcher,
		type CwLanguageOption
	} from '@cropwatchdevelopment/cwui';
	import { getLocale, setLocale } from '$lib/paraglide/runtime.js';

	const locales: CwLanguageOption[] = [
		{ locale: 'en', label: 'English', shortLabel: 'EN', flag: '🇺🇸' },
		{ locale: 'es', label: 'Español', shortLabel: 'ES', flag: '🇪🇸' },
		{ locale: 'fr', label: 'Français', shortLabel: 'FR', flag: '🇫🇷' }
	];

	let locale = $state(getLocale());
</script>

<CwLanguageSwitcher
	label="Language"
	options={locales}
	bind:locale={locale}
	setLocale={setLocale}
/>

Selected toolbar locale: es-MX. Disabled entries stay visible so users can see what is coming next.

<script lang="ts">
	const locales = [
		{
			locale: 'en',
			label: 'English',
			shortLabel: 'EN',
			flag: '🇺🇸',
			description: 'Default product copy'
		},
		{
			locale: 'es-MX',
			label: 'Español (México)',
			shortLabel: 'ES',
			flag: '🇲🇽',
			description: 'Regional billing and support copy'
		},
		{
			locale: 'de',
			label: 'Deutsch',
			shortLabel: 'DE',
			flag: '🇩🇪',
			description: 'Translation QA in progress',
			disabled: true
		}
	];

	let locale = $state('es-MX');
</script>

<CwLanguageSwitcher
	label="Content locale"
	options={locales}
	bind:locale={locale}
/>

Documentation Upgrade

Start here

CwLanguageSwitcher is a Paraglide-ready locale picker. Pass an `options` array, bind the current locale when the parent cares about it, and hand in Paraglide's `setLocale` function so the app actually swaps translations.

How to think about it

Use exact locale codes Each option's `locale` value should match the locale codes your Paraglide runtime expects, such as `en`, `fr`, or `pt-BR`.
Wire the runtime setter once Pass Paraglide's `setLocale` function directly so the component updates the actual app locale instead of only changing local UI state.
Keep unavailable languages visible Use `description` and `disabled` together when a locale is planned but not released yet, so users understand the roadmap without being able to select it.

Props and option shape

Each `CwLanguageOption` accepts `locale`, `label`, and optional `flag`, `flagType`, `shortLabel`, `description`, and `disabled`.

API	Type	Details
`options` Required	`CwLanguageOption[]`	Language rows shown in the menu. Each option needs a `locale` and `label`.
`locale`	`string`	Current locale. Bind this when parent UI also needs to react to locale changes.
`setLocale`	`(locale: string) => void \| Promise<void>`	Consumer callback, typically Paraglide's runtime `setLocale` function.
`onchange`	`(locale: string, option: CwLanguageOption) => void \| Promise<void>`	Runs after a locale has been applied successfully.
`onerror`	`(error: unknown, locale: string, option: CwLanguageOption) => void`	Runs if `setLocale` fails so the parent can log or surface an error.
`label`	`string`	Optional field label rendered above the trigger.
`disabled` Default: `false`	`boolean`	Disables the trigger and prevents opening the menu.

Copy-paste examples

These snippets intentionally show the full public API surface the live demo relies on.

Paraglide runtime wiring

Use Paraglide's `getLocale` and `setLocale` runtime helpers as the source of truth.

<script lang="ts">
	import {
		CwLanguageSwitcher,
		type CwLanguageOption
	} from '@cropwatchdevelopment/cwui';
	import { getLocale, setLocale } from '$lib/paraglide/runtime.js';

	const locales: CwLanguageOption[] = [
		{ locale: 'en', label: 'English', shortLabel: 'EN', flag: '🇺🇸' },
		{ locale: 'es', label: 'Español', shortLabel: 'ES', flag: '🇪🇸' },
		{ locale: 'fr', label: 'Français', shortLabel: 'FR', flag: '🇫🇷' }
	];

	let locale = $state(getLocale());
</script>

<CwLanguageSwitcher
	label="Language"
	options={locales}
	bind:locale={locale}
	setLocale={setLocale}
/>

Rich option metadata

Descriptions make regional variants and staged launches clearer without custom rendering.

<script lang="ts">
	const locales = [
		{
			locale: 'en',
			label: 'English',
			shortLabel: 'EN',
			flag: '🇺🇸',
			description: 'Default product copy'
		},
		{
			locale: 'es-MX',
			label: 'Español (México)',
			shortLabel: 'ES',
			flag: '🇲🇽',
			description: 'Regional content and billing copy'
		},
		{
			locale: 'de',
			label: 'Deutsch',
			shortLabel: 'DE',
			flag: '🇩🇪',
			description: 'Coming soon',
			disabled: true
		}
	];
</script>

<CwLanguageSwitcher options={locales} />