Locale Lang Toggle

Overview

Locale Language Toggle is a code component that integrates seamlessly with Framer's native localization feature. This toggle uses Framer's built-in Locale API, automatically syncing with your existing locale setup. No configuration per page, no manual URL mapping — just one component that works everywhere.

Why This Component

This component gives you independent color customization for each style. Customize Glass colors without affecting Solid or Floating — complete design freedom across every variant.

Features

• Independent color palettes per style — a unique feature for true design flexibility

• Direct Framer Locale integration — no per-page setup

• 80+ country flags auto-displayed

• Three customizable styles: Glass, Solid, Floating

• Three display modes: Flag + Text, Flag Only, Text Only

• Smooth spring animation

• Mobile responsive (44px minimum touch target)

• ARIA-compliant for accessibility

How It Works

1. Place the component on your page

2. Enter your Locale A ID (e.g., en)

3. Enter your Locale B ID (e.g., es)

4. Done — the toggle syncs with Framer's active locale automatically

Requirements

Framer plan with Locales enabled (Basic or higher). Works with both manual translations and Auto Translate.

Setup Tip

For Glass and Floating styles, set the parent frame's Overflow to "Visible" so shadows display correctly.