언어 변경 Language switcher

언어 변경은 서비스의 콘텐츠를 표시할 언어를 변경하거나 별도의 외국어 서비스로 이동하는 데 사용되는 요소이다. 한국어가 익숙하지 않은 사용자가 콘텐츠 표시 언어를 변경할 수 있는 수단을 발견하지 못한다면 서비스를 이용할 수 없게 되므로, 디지털 정부서비스로 직관적이고 일관된 방식으로 언어 변경을 제공하는 것이 매우 중요하다.

KRDS 가이드

기본

tsx

import { LanguageSwitcher } from '@krds.ui/react'

export default function LanguageSwitcherDemo() {
  return (
    <LanguageSwitcher
      defaultValue="ko"
      options={[
        { value: 'ko', label: '한국어' },
        { value: 'en', label: 'English' }
      ]}
    >
      <LanguageSwitcher.Trigger />
      <LanguageSwitcher.Menu>
        <LanguageSwitcher.Current />
        <LanguageSwitcher.OptionList />
      </LanguageSwitcher.Menu>
    </LanguageSwitcher>
  )
}

LanguageSwitcher

Props

이름	타입	기본값
`value`	`string`	-
`defaultValue`	`string`	-
`onChange`	`((value: string, option: LanguageOption) => void)`	-
`options`	`LanguageOption[]`	`[]`
`className`	`string`	-
`open`	`boolean`	-
`defaultOpen`	`boolean`	-
`onOpenChange`	`((open: boolean) => void)`	-
`closeOnClickOutside`	`boolean`	`true`

언어 변경 Language switcher ​

기본 ​

LanguageSwitcher ​

Props

언어 변경 Language switcher

기본

LanguageSwitcher