TransferList

Two lists and the way between them: what is available, what is chosen.

Import it from rei-kit/web: import { TransferList } from 'rei-kit/web'

Open TransferList 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 { TransferList } from 'rei-kit/web'

const granted = ref<string[]>(['read'])
const permissions = [
  { value: 'read', label: 'Read' },
  { value: 'write', label: 'Write' },
  { value: 'admin', label: 'Administer' },
]
</script>

<template>
  <TransferList
    v-model="granted"
    :options="permissions"
    available-label="Available"
    chosen-label="Granted"
    add-label="Grant the chosen permissions"
    remove-label="Take back the chosen permissions"
  />
</template>

Props

Props
Prop	Type	Required or default	What it is for
`options`	`readonly ListboxOption<V>[]`	yes
`availableLabel`	`string`	yes	Heading over the left list, e.g. "Available". Already translated.
`chosenLabel`	`string`	yes	Heading over the right list.
`addLabel`	`string`	yes	The → button's accessible name, e.g. "Add the chosen ones".
`removeLabel`	`string`	yes	The ← button's accessible name.
`height`	`string`	'14rem'

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