PickList

Two listboxes with transfer buttons

Choosing a subset from a long list where both sides matter — the columns to show, the members of a group. For picking several from a short list, a multiple Listbox or checkboxes are simpler; to reorder a single list, OrderList.

Basic

Cast · 5

加藤恵

英梨々

詩羽

美智留

出海

Main · 1

倫也

<script setup lang="ts">
import { ref } from "vue";
import { BlessPickList } from "blessing-ui";
const source = ref([
  { value: "megumi", label: "加藤恵" },
  { value: "eriri", label: "英梨々" },
  { value: "utaha", label: "詩羽" },
  { value: "michiru", label: "美智留" },
  { value: "izumi", label: "出海" },
]);
const target = ref([{ value: "tomoya", label: "倫也" }]);
</script>

<template>
  <div style="max-width: 560px">
    <BlessPickList
      v-model:source="source"
      v-model:target="target"
      source-label="Cast"
      target-label="Main"
      :rows="4"
    />
  </div>
</template>

• Select in either list (Space, or click), then move with the buttons between them. Buttons are named after the list they move to; after a move, focus goes to that list and the move is announced.
• v-model:source and v-model:target both update; sourceLabel / targetLabel name the lists.

Usage

import { BlessPickList } from "blessing-ui";

API

Props

Name	Type	Default	Description
sourceLabel	string	"Available"
targetLabel	string	"Selected"
rows	number	6
source	BlessOption<T>[]	[]
target	BlessOption<T>[]	[]

Events

Name	Payload	Description
update:source	[value: BlessOption<T>[]]
update:target	[value: BlessOption<T>[]]