> Leaf UI 0.8.1 · Package: @ifhover/leaf-ui · Source: 435bab23cad7d343653d9b63b049c0b0601eeefb
> Browser documentation: https://ifhover.github.io/leaf-ui/en/guide/internationalization.html

> For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/en/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/en/llms-full.txt.

# Switch languages

Set `locale` on ConfigProvider to change built-in text in date panels, empty states and clear actions.

## Set a language

Wrap your application with ConfigProvider and pass a language tag. This example switches the date panel's built-in text to English:

```tsx
import { ConfigProvider, DatePicker } from '@ifhover/leaf-ui';

export default function App() {
  return (
    <ConfigProvider locale="en-US">
      <DatePicker />
    </ConfigProvider>
  );
}
```

Replace DatePicker with your application content to share the language across components and popups. The default is Simplified Chinese. See [ConfigProvider → Built-in languages](https://ifhover.github.io/leaf-ui/en/components/config-provider.md#built-in-languages) for the full list and language tags.

## Switch in your application

If your application already has a language selector, pass its current language state to `locale`. Components in the region update when that state changes. See the [interactive ConfigProvider example](https://ifhover.github.io/leaf-ui/en/components/config-provider.md#switch-languages).

To change only part of a page, nest a ConfigProvider around that region. An omitted `locale` inherits the parent language.

Translate page headings, field labels and options in your application. For another language or custom built-in text, see [ConfigProvider → Add your own language](https://ifhover.github.io/leaf-ui/en/components/config-provider.md#add-your-own-language).