LocaleSheet

Choosing the interface language, from a settings row.

Import it from rei-kit/app: import { LocaleSheet } from 'rei-kit/app'

Open LocaleSheet in the live documentation, where every prop below is a control you can change, in four materials and ten palettes.

Usage

<script setup lang="ts">
import { ref } from 'vue'
import { LocaleSheet } from 'rei-kit/app'

const locale = ref('system')
</script>

<template>
  <LocaleSheet
    v-model="locale"
    label="Language"
    system-label="Same as device"
    :options="[
      { value: 'en', label: 'English' },
      { value: 'tr', label: 'Türkçe' },
    ]"
    close-label="Close"
  />
</template>

Props

Props
Prop	Type	Required or default	What it is for
`label`	`string`	yes	The settings row's label, and the sheet's title.
`hint`	`string`	''
`systemLabel`	`string`	yes	What "follow the device" is called. Its value is `system`.
`options`	`readonly { value: string; label: string }[]`	yes	In the order they should be listed. Labels are endonyms.
`closeLabel`	`string`	''

About rei-kit

rei-kit is an accessible Vue 3 and Tailwind CSS 4 component library: 106 components, themed by role rather than by colour on three independent axes — ten WCAG-checked palettes, four materials and light or dark, each switched with one attribute. Typed, tested, SSR-safe, no runtime dependencies, MIT.

pnpm add rei-kit · npm · GitHub