v1.7
GitHub リポジトリ

リストボックス (Select)

リストボックスは、キーボードナビゲーションの堅牢なサポートを備えた、カスタムでアクセス可能なアプリのセレクトメニューを構築するための優れた基盤となります。

まず、npm 経由で Headless UI をインストールします。

このライブラリは Vue 3 のみをサポートしていることに注意してください。

npm install @headlessui/vue

リストボックスは、Listbox、ListboxButton、ListboxOptions、ListboxOption、および ListboxLabel コンポーネントを使用して構築されます。

ListboxButton は、クリックされると自動的に ListboxOptions を開閉します。また、メニューが開いているときは、項目のリストがフォーカスを受け取り、キーボードで自動的にナビゲート可能になります。

<template>
  <Listbox v-model="selectedPerson">
    <ListboxButton>{{ selectedPerson.name }}</ListboxButton>
    <ListboxOptions>
      <ListboxOption
        v-for="person in people"
        :key="person.id"
        :value="person"
        :disabled="person.unavailable"
      >
        {{ person.name }}
      </ListboxOption>
    </ListboxOptions>
  </Listbox>
</template>

<script setup>
  import { ref } from 'vue'
  import {
    Listbox,
    ListboxButton,
    ListboxOptions,
    ListboxOption,
  } from '@headlessui/vue'

  const people = [
    { id: 1, name: 'Durward Reynolds', unavailable: false },
    { id: 2, name: 'Kenton Towne', unavailable: false },
    { id: 3, name: 'Therese Wunsch', unavailable: false },
    { id: 4, name: 'Benedict Kessler', unavailable: true },
    { id: 5, name: 'Katelyn Rohan', unavailable: false },
  ]
  const selectedPerson = ref(people[0])
</script>

Headless UI は、どのリストボックスオプションが現在選択されているか、ポップオーバーが開いているか閉じているか、またはリストボックス内のどの項目がキーボードで現在アクティブかなど、各コンポーネントに関する多くの状態を追跡します。

しかし、コンポーネントはヘッドレスで、初期状態では完全にスタイルが設定されていないため、各状態に必要なスタイルを自分で提供するまで、この情報を UI で表示できません。

各コンポーネントは、現在の状態に関する情報を スロットプロパティ を介して公開します。これにより、異なるスタイルを条件付きで適用したり、異なるコンテンツをレンダリングしたりできます。

たとえば、ListboxOption コンポーネントは active 状態を公開します。これは、項目がマウスまたはキーボードで現在フォーカスされているかどうかを示します。

<template>
  <Listbox v-model="selectedPerson">
    <ListboxButton>{{ selectedPerson.name }}</ListboxButton>
    <ListboxOptions>
      <!-- Use the `active` state to conditionally style the active option. -->
      <!-- Use the `selected` state to conditionally style the selected option. -->
      <ListboxOption
        v-for="person in people"
        :key="person.id"
        :value="person"
        as="template"

        v-slot="{ active, selected }"
      >
        <li
          :class="{

            'bg-blue-500 text-white': active,
            'bg-white text-black': !active,
          }"
        >

          <CheckIcon v-show="selected" />
          {{ person.name }}
        </li>
      </ListboxOption>
    </ListboxOptions>
  </Listbox>
</template>

<script setup>
  import { ref } from 'vue'
  import {
    Listbox,
    ListboxButton,
    ListboxOptions,
    ListboxOption,
  } from '@headlessui/vue'
  import { CheckIcon } from '@heroicons/vue/20/solid'

  const people = [
    { id: 1, name: 'Durward Reynolds' },
    { id: 2, name: 'Kenton Towne' },
    { id: 3, name: 'Therese Wunsch' },
    { id: 4, name: 'Benedict Kessler' },
    { id: 5, name: 'Katelyn Rohan' },
  ]
  const selectedPerson = ref(people[0])
</script>

利用可能なすべてのスロットプロパティの完全なリストについては、コンポーネントAPIドキュメントを参照してください。

各コンポーネントは、現在の状態に関する情報を、異なるスタイルを条件付きで適用するために使用できる data-headlessui-state 属性を介して公開します。

スロットプロパティAPI の状態のいずれかが true の場合、それらはこの属性にスペースで区切られた文字列としてリストされるため、[attr~=value] の形式で CSS属性セレクター でそれらをターゲットにできます。

たとえば、リストボックスが開いていて、2 番目の項目が active の場合、いくつかの子 ListboxOption コンポーネントを持つ ListboxOptions コンポーネントがレンダリングする内容は次のとおりです。

<!-- Rendered `ListboxOptions` -->
<ul data-headlessui-state="open">
  <li data-headlessui-state="">Wade Cooper</li>
  <li data-headlessui-state="active selected">Arlene Mccoy</li>
  <li data-headlessui-state="">Devon Webb</li>
</ul>

Tailwind CSS を使用している場合は、@headlessui/tailwindcss プラグインを使用して、ui-open:* や ui-active:* などの修飾子を使用してこの属性をターゲットにできます。

<template>
  <Listbox v-model="selectedPerson">
    <ListboxButton>{{ selectedPerson.name }}</ListboxButton>
    <ListboxOptions>
      <ListboxOption
        v-for="person in people"
        :key="person.id"
        :value="person"

        class="ui-active:bg-blue-500 ui-active:text-white ui-not-active:bg-white ui-not-active:text-black"
      >

        <CheckIcon class="hidden ui-selected:block" />
        {{ person.name }}
      </ListboxOption>
    </ListboxOptions>
  </Listbox>
</template>

<script setup>
  import { ref } from 'vue'
  import {
    Listbox,
    ListboxButton,
    ListboxOptions,
    ListboxOption,
  } from '@headlessui/vue'
  import { CheckIcon } from '@heroicons/vue/20/solid'

  const people = [
    { id: 1, name: 'Durward Reynolds' },
    { id: 2, name: 'Kenton Towne' },
    { id: 3, name: 'Therese Wunsch' },
    { id: 4, name: 'Benedict Kessler' },
    { id: 5, name: 'Katelyn Rohan' },
  ]
  const selectedPerson = ref(people[0])
</script>

文字列のみを値として提供できるネイティブ HTML フォームコントロールとは異なり、Headless UI は複雑なオブジェクトのバインドもサポートしています。

<template>

  <Listbox v-model="selectedPerson">
    <ListboxButton>{{ selectedPerson.name }}</ListboxButton>
    <ListboxOptions>
      <ListboxOption
        v-for="person in people"
        :key="person.id"

        :value="person"
        :disabled="person.unavailable"
      >
        {{ person.name }}
      </ListboxOption>
    </ListboxOptions>
  </Listbox>
</template>

<script setup>
  import { ref } from 'vue'
  import {
    Listbox,
    ListboxButton,
    ListboxOptions,
    ListboxOption,
  } from '@headlessui/vue'


  const people = [
    { id: 1, name: 'Durward Reynolds', unavailable: false },
    { id: 2, name: 'Kenton Towne', unavailable: false },
    { id: 3, name: 'Therese Wunsch', unavailable: false },
    { id: 4, name: 'Benedict Kessler', unavailable: true },
    { id: 5, name: 'Katelyn Rohan', unavailable: false },
  ]
  const selectedPerson = ref(people[1])
</script>

オブジェクトを値としてバインドする場合は、オブジェクトの同じインスタンスを Listbox の value と対応する ListboxOption の両方として使用するようにしてください。そうしないと、それらが等しくならず、リストボックスが正しく動作しなくなります。

同じオブジェクトの異なるインスタンスを簡単に使用できるように、オブジェクトの同一性を比較する代わりに、特定のフィールドでオブジェクトを比較するために by プロパティを使用できます。

<template>
  <Listbox
    :modelValue="modelValue"
    @update:modelValue="value => emit('update:modelValue', value)"

    by="id"
  >
    <ListboxButton>{{ modelValue.name }}</ListboxButton>
    <ListboxOptions>
      <ListboxOption
        v-for="department in departments"
        :key="department.id"
        :value="department"
      >
        {{ department.name }}
      </ListboxOption>
    </ListboxOptions>
  </Listbox>
</template>

<script setup>
  import {
    Listbox,
    ListboxButton,
    ListboxOptions,
    ListboxOption,
  } from '@headlessui/vue'

  const props = defineProps({ modelValue: Object })
  const emit = defineEmits(['update:modelValue'])

  const departments = [
    { id: 1, name: 'Marketing', contact: 'Durward Reynolds' },
    { id: 2, name: 'HR', contact: 'Kenton Towne' },
    { id: 3, name: 'Sales', contact: 'Therese Wunsch' },
    { id: 4, name: 'Finance', contact: 'Benedict Kessler' },
    { id: 5, name: 'Customer service', contact: 'Katelyn Rohan' },
  ]
</script>

オブジェクトの比較方法を完全に制御したい場合は、独自の比較関数を by プロパティに渡すこともできます。

<template>
  <Listbox
    :modelValue="modelValue"
    @update:modelValue="value => emit('update:modelValue', value)"

    :by="compareDepartments"
  >
    <ListboxButton>{{ modelValue.name }}</ListboxButton>
    <ListboxOptions>
      <ListboxOption
        v-for="department in departments"
        :key="department.id"
        :value="department"
      >
        {{ department.name }}
      </ListboxOption>
    </ListboxOptions>
  </Listbox>
</template>

<script setup>
  import {
    Listbox,
    ListboxButton,
    ListboxOptions,
    ListboxOption,
  } from '@headlessui/vue'

  const props = defineProps({ modelValue: Object })
  const emit = defineEmits(['update:modelValue'])


  function compareDepartments(a, b) {
    return a.name.toLowerCase() === b.name.toLowerCase()
  }

  const departments = [
    { id: 1, name: 'Marketing', contact: 'Durward Reynolds' },
    { id: 2, name: 'HR', contact: 'Kenton Towne' },
    { id: 3, name: 'Sales', contact: 'Therese Wunsch' },
    { id: 4, name: 'Finance', contact: 'Benedict Kessler' },
    { id: 5, name: 'Customer service', contact: 'Katelyn Rohan' },
  ]
</script>

リストボックスで複数の値を選択できるようにするには、multiple プロパティを使用して、単一のオプションの代わりに配列を v-model に渡します。

<template>

  <Listbox v-model="selectedPeople" multiple>
    <ListboxButton>
      {{ selectedPeople.map((person) => person.name).join(', ') }}
    </ListboxButton>
    <ListboxOptions>
      <ListboxOption v-for="person in people" :key="person.id" :value="person">
        {{ person.name }}
      </ListboxOption>
    </ListboxOptions>
  </Listbox>
</template>

<script setup>
  import { ref } from 'vue'
  import {
    Listbox,
    ListboxButton,
    ListboxOptions,
    ListboxOption,
  } from '@headlessui/vue'

  const people = [
    { id: 1, name: 'Durward Reynolds' },
    { id: 2, name: 'Kenton Towne' },
    { id: 3, name: 'Therese Wunsch' },
    { id: 4, name: 'Benedict Kessler' },
    { id: 5, name: 'Katelyn Rohan' },
  ]

  const selectedPeople = ref([people[0], people[1]])
</script>

これにより、オプションを選択しているときにリストボックスが開いたままになり、オプションを選択すると、その場で切り替わります。

v-model バインディングは、オプションが追加または削除されるたびに、選択したすべてのオプションを含む配列で更新されます。

デフォルトでは、Listbox はボタンの内容をスクリーンリーダーのラベルとして使用します。補助技術にアナウンスされる内容をより詳細に制御したい場合は、ListboxLabel コンポーネントを使用します。

<template>
  <Listbox v-model="selectedPerson">

    <ListboxLabel>Assignee:</ListboxLabel>
    <ListboxButton>{{ selectedPerson.name }}</ListboxButton>
    <ListboxOptions>
      <ListboxOption v-for="person in people" :key="person.id" :value="person">
        {{ person.name }}
      </ListboxOption>
    </ListboxOptions>
  </Listbox>
</template>

<script setup>
  import { ref } from 'vue'
  import {
    Listbox,
    ListboxLabel,
    ListboxButton,
    ListboxOptions,
    ListboxOption,
  } from '@headlessui/vue'

  const people = [
    { id: 1, name: 'Durward Reynolds' },
    { id: 2, name: 'Kenton Towne' },
    { id: 3, name: 'Therese Wunsch' },
    { id: 4, name: 'Benedict Kessler' },
    { id: 5, name: 'Katelyn Rohan' },
  ]
  const selectedPerson = ref(people[0])
</script>

リストボックスに name プロパティを追加すると、非表示の input 要素がレンダリングされ、選択した値と同期されます。

<template>
  <form action="/projects/1/assignee" method="post">

    <Listbox v-model="selectedPerson" name="assignee">
      <ListboxButton>{{ selectedPerson.name }}</ListboxButton>
      <ListboxOptions>
        <ListboxOption
          v-for="person in people"
          :key="person.id"
          :value="person"
        >
          {{ person.name }}
        </ListboxOption>
      </ListboxOptions>
    </Listbox>
    <button>Submit</button>
  </form>
</template>

<script setup>
  import { ref } from 'vue'
  import {
    Listbox,
    ListboxButton,
    ListboxOptions,
    ListboxOption,
  } from '@headlessui/vue'

  const people = [
    { id: 1, name: 'Durward Reynolds' },
    { id: 2, name: 'Kenton Towne' },
    { id: 3, name: 'Therese Wunsch' },
    { id: 4, name: 'Benedict Kessler' },
    { id: 5, name: 'Katelyn Rohan' },
  ]
  const selectedPerson = ref(people[0])
</script>

これにより、リストボックスをネイティブ HTML <form> 内で使用し、リストボックスがネイティブ HTML フォームコントロールであるかのように、従来のフォーム送信を行うことができます。

文字列などの基本値は、その値を含む単一の非表示入力としてレンダリングされますが、オブジェクトなどの複雑な値は、名前の角かっこ表記を使用して複数の入力にエンコードされます。

<input type="hidden" name="assignee[id]" value="1" />
<input type="hidden" name="assignee[name]" value="Durward Reynolds" />

value の代わりに defaultValue プロパティを Listbox に提供すると、Headless UI はその状態を内部的に追跡するため、非制御コンポーネントとして使用できます。

現在選択されているオプションには、Listbox および ListboxButton コンポーネントの value スロットプロパティを介してアクセスできます。

<template>
  <form action="/projects/1/assignee" method="post">

    <Listbox name="assignee" :defaultValue="people[0]">
      <ListboxButton v-slot="{ value }">{{ value.name }}</ListboxButton>
      <ListboxOptions>
        <ListboxOption
          v-for="person in people"
          :key="person.id"
          :value="person"
        >
          {{ person.name }}
        </ListboxOption>
      </ListboxOptions>
    </Listbox>
    <button>Submit</button>
  </form>
</template>

<script setup>
  import {
    Listbox,
    ListboxButton,
    ListboxOptions,
    ListboxOption,
  } from '@headlessui/vue'

  const people = [
    { id: 1, name: 'Durward Reynolds' },
    { id: 2, name: 'Kenton Towne' },
    { id: 3, name: 'Therese Wunsch' },
    { id: 4, name: 'Benedict Kessler' },
    { id: 5, name: 'Katelyn Rohan' },
  ]
</script>

これにより、リストボックスを HTML フォームで使用する場合や、React の状態を使用して追跡する代わりに FormData を使用して状態を収集するフォームAPIで使用する場合に、コードを簡略化できます。

コンポーネントの値が変更された場合に何らかの副作用を実行する必要がある場合に備えて、提供する @update:modelValue プロパティは引き続き呼び出されますが、コンポーネントの状態を自分で追跡するために使用する必要はありません。

デフォルトでは、ListboxOptions インスタンスは、Listbox コンポーネント自体内で追跡される内部 open 状態に基づいて自動的に表示/非表示になります。

<template>
  <Listbox v-model="selectedPerson">
    <ListboxButton>{{ selectedPerson.name }}</ListboxButton>

    <!--
      By default, the `ListboxOptions` will automatically show/hide
      when the `ListboxButton` is pressed.
    -->
    <ListboxOptions>
      <ListboxOption v-for="person in people" :key="person.id" :value="person">
        {{ person.name }}
      </ListboxOption>
    </ListboxOptions>
  </Listbox>
</template>

<script setup>
  import { ref } from 'vue'
  import {
    Listbox,
    ListboxButton,
    ListboxOptions,
    ListboxOption,
  } from '@headlessui/vue'

  const people = [
    { name: 'Durward Reynolds' },
    { name: 'Kenton Towne' },
    { name: 'Therese Wunsch' },
    { name: 'Benedict Kessler' },
    { name: 'Katelyn Rohan' },
  ]
  const selectedPerson = ref(people[0])
</script>

これを自分で処理したい場合 (何らかの理由で追加のラッパー要素を追加する必要がある場合など)、static プロパティを ListboxOptions インスタンスに追加して常にレンダリングするように指示し、Listbox によって提供される open スロットプロパティを調べて、自分で表示/非表示にする要素を制御できます。

<template>

  <Listbox v-model="selectedPerson" v-slot="{ open }">
    <ListboxButton>{{ selectedPerson.name }}</ListboxButton>


    <div v-show="open">
      <!--
        Using the `static` prop, the `ListboxOptions` are always
        rendered and the `open` state is ignored.
      -->

      <ListboxOptions static>
        <ListboxOption
          v-for="person in people"
          :key="person.id"
          :value="person"
        >
          {{ person.name }}
        </ListboxOption>
      </ListboxOptions>
    </div>
  </Listbox>
</template>

<script setup>
  import { ref } from 'vue'
  import {
    Listbox,
    ListboxButton,
    ListboxOptions,
    ListboxOption,
  } from '@headlessui/vue'

  const people = [
    { name: 'Durward Reynolds' },
    { name: 'Kenton Towne' },
    { name: 'Therese Wunsch' },
    { name: 'Benedict Kessler' },
    { name: 'Katelyn Rohan' },
  ]
  const selectedPerson = ref(people[0])
</script>

disabled プロパティを使用して ListboxOption を無効にします。これにより、マウスとキーボードで選択できなくなり、上下矢印を押すとスキップされます。

<template>
  <Listbox v-model="selectedPerson">
    <ListboxButton>{{ selectedPerson.name }}</ListboxButton>

    <ListboxOptions>
      <!-- Disabled options will be skipped by keyboard navigation. -->
      <ListboxOption
        v-for="person in people"
        :key="person.name"
        :value="person"

        :disabled="person.unavailable"
      >
        <span :class='{ "opacity-75": person.unavailable }'>
          {{ person.name }}
        </span>
      </ListboxOption>
    </ListboxOptions>
  </Listbox>
</template>

<script setup>
  import { ref } from 'vue'
  import {
    Listbox,
    ListboxButton,
    ListboxOptions,
    ListboxOption,
  } from '@headlessui/vue'

  const people = [
    { name: 'Durward Reynolds', unavailable: true },
    { name: 'Kenton Towne', unavailable: false },
    { name: 'Therese Wunsch', unavailable: false },
    { name: 'Benedict Kessler', unavailable: true },
    { name: 'Katelyn Rohan', unavailable: false },
  ]
  const selectedPerson = ref(people[0])
</script>

リストボックスの開閉をアニメーション化するには、Vue の組み込み <transition> コンポーネントを使用できます。必要なのは、ListboxOptions インスタンスを <transition> でラップするだけで、トランジションが自動的に適用されます。

<template>
  <Listbox v-model="selectedPerson">
    <ListboxButton>{{ selectedPerson.name }}</ListboxButton>

    <!-- Use Vue's built-in `transition` component to add transitions. -->

    <transition
      enter-active-class="transition duration-100 ease-out"
      enter-from-class="transform scale-95 opacity-0"
      enter-to-class="transform scale-100 opacity-100"
      leave-active-class="transition duration-75 ease-out"
      leave-from-class="transform scale-100 opacity-100"
      leave-to-class="transform scale-95 opacity-0"
    >
      <ListboxOptions>
        <ListboxOption
          v-for="person in people"
          :key="person.id"
          :value="person"
        >
          {{ person.name }}
        </ListboxOption>
      </ListboxOptions>
    </transition>
  </Listbox>
</template>

<script setup>
  import { ref } from 'vue'
  import {
    Listbox,
    ListboxButton,
    ListboxOptions,
    ListboxOption,
  } from '@headlessui/vue'

  const people = [
    { id: 1, name: 'Durward Reynolds' },
    { id: 2, name: 'Kenton Towne' },
    { id: 3, name: 'Therese Wunsch' },
    { id: 4, name: 'Benedict Kessler' },
    { id: 5, name: 'Katelyn Rohan' },
  ]
  const selectedPerson = ref(people[0])
</script>

リストボックスの異なる子要素に対して複数のトランジションを調整したい場合は、Headless UI に含まれているトランジションコンポーネントを確認してください。

デフォルトでは、Listbox とそのサブコンポーネントはそれぞれ、そのコンポーネントにとって適切なデフォルト要素をレンダリングします。

たとえば、ListboxLabel はデフォルトで label をレンダリングし、ListboxButton は button をレンダリングし、ListboxOptions は ul をレンダリングし、ListboxOption は li をレンダリングします。対照的に、Listbox は要素をレンダリングせず、代わりにその子を直接レンダリングします。

これは、すべてのコンポーネントに存在する as プロパティを使用して簡単に変更できます。

<template>
  <!-- Render a `div` instead of nothing -->

  <Listbox as="div" v-model="selectedPerson">
    <ListboxButton>{{ selectedPerson.name }}</ListboxButton>

    <!-- Render a `div` instead of a `ul` -->

    <ListboxOptions as="div">
      <!-- Render a `span` instead of a `li` -->
      <ListboxOption

        as="span"
        v-for="person in people"
        :key="person.id"
        :value="person"
      >
        {{ person.name }}
      </ListboxOption>
    </ListboxOptions>
  </Listbox>
</template>

<script setup>
  import { ref } from 'vue'
  import {
    Listbox,
    ListboxButton,
    ListboxOptions,
    ListboxOption,
  } from '@headlessui/vue'

  const people = [
    { id: 1, name: 'Durward Reynolds' },
    { id: 2, name: 'Kenton Towne' },
    { id: 3, name: 'Therese Wunsch' },
    { id: 4, name: 'Benedict Kessler' },
    { id: 5, name: 'Katelyn Rohan' },
  ]
  const selectedPerson = ref(people[0])
</script>

要素にラッパー要素なしで子を直接レンダリングするように指示するには、as="template" を使用します。

<template>
  <Listbox v-model="selectedPerson">
    <!-- Render children directly instead of a `ListboxButton` -->

    <ListboxButton as="template">
      <button>{{ selectedPerson.name }}</button>
    </ListboxButton>

    <ListboxOptions>
      <ListboxOption v-for="person in people" :key="person.id" :value="person">
        {{ person.name }}
      </ListboxOption>
    </ListboxOptions>
  </Listbox>
</template>

<script setup>
  import { ref } from 'vue'
  import {
    Listbox,
    ListboxButton,
    ListboxOptions,
    ListboxOption,
  } from '@headlessui/vue'

  const people = [
    { id: 1, name: 'Durward Reynolds' },
    { id: 2, name: 'Kenton Towne' },
    { id: 3, name: 'Therese Wunsch' },
    { id: 4, name: 'Benedict Kessler' },
    { id: 5, name: 'Katelyn Rohan' },
  ]
  const selectedPerson = ref(people[0])
</script>

ListboxOptions を水平方向に表示するようにスタイル設定している場合は、Listbox コンポーネントで horizontal プロパティを使用して、上下の代わりに左右の矢印キーで項目をナビゲートできるようにし、補助技術用の aria-orientation 属性を更新します。

<template>

  <Listbox v-model="selectedPerson" horizontal>
    <ListboxButton>{{ selectedPerson.name }}</ListboxButton>

    <ListboxOptions class="flex flex-row">
      <ListboxOption v-for="person in people" :key="person.id" :value="person">
        {{ person.name }}
      </ListboxOption>
    </ListboxOptions>
  </Listbox>
</template>

<script setup>
  import { ref } from 'vue'
  import {
    Listbox,
    ListboxButton,
    ListboxOptions,
    ListboxOption,
  } from '@headlessui/vue'

  const people = [
    { id: 1, name: 'Durward Reynolds' },
    { id: 2, name: 'Kenton Towne' },
    { id: 3, name: 'Therese Wunsch' },
    { id: 4, name: 'Benedict Kessler' },
    { id: 5, name: 'Katelyn Rohan' },
  ]
  const selectedPerson = ref(people[0])
</script>

リストボックスが開かれると、ListboxOptions がフォーカスを受け取ります。フォーカスは、Escape が押されるか、ユーザーがオプションの外側をクリックするまで、項目のリスト内に保持されます。リストボックスを閉じると、フォーカスは ListboxButton に戻ります。

ListboxButton をクリックすると、オプションリストの開閉が切り替わります。オプションリストの外側をクリックすると、リストボックスは閉じます。

コマンド説明

Enter, Space, 下矢印キー, または 上矢印キーListboxButton にフォーカスがある場合

リストボックスを開き、選択された項目にフォーカスを当てます。

Esc リストボックスが開いている場合

リストボックスを閉じます。

下矢印キー または 上矢印キーリストボックスが開いている場合

前の/次の無効でない項目にフォーカスを当てます。

左矢印キー または 右矢印キーリストボックスが開いていて、horizontal が設定されている場合

前の/次の無効でない項目にフォーカスを当てます。

Home または PageUp リストボックスが開いている場合

最初の無効でない項目にフォーカスを当てます。

End または PageDown リストボックスが開いている場合

最後の無効でない項目にフォーカスを当てます。

Enter または Space リストボックスが開いている場合

現在の項目を選択します。

A–Z または a–z リストボックスが開いている場合

キーボード入力に一致する最初の項目にフォーカスを当てます。

関連するすべての ARIA 属性は自動的に管理されます。

メインの Listbox コンポーネント。

Propデフォルト説明
asテンプレート
String | Component

Listbox がレンダリングする要素またはコンポーネント。

v-model—
T

選択された値。

defaultValue—
T

非制御コンポーネントとして使用する場合のデフォルト値。

by—
keyof T | ((a: T, z: T) => boolean)

特定のフィールドでオブジェクトを比較するか、オブジェクトの比較方法を完全に制御するための独自の比較関数を渡すために使用します。

disabledfalse
Boolean

Listbox コンポーネント全体と関連する子を無効にするために使用します。

horizontalfalse
Boolean

true の場合、ListboxOptions の向きは horizontal になり、それ以外の場合は vertical になります。

name—
String

フォーム内でこのコンポーネントを使用する際に使用される名前。

multiplefalse
Boolean

複数のオプションを選択できるかどうか。

スロットプロパティ説明
value

T

選択された値。

open

Boolean

Listbox が開いているかどうか。

disabled

Boolean

Listbox が無効になっているかどうか。

Listbox のボタン。

Propデフォルト説明
asbutton
String | Component

ListboxButton がレンダリングする要素またはコンポーネント。

スロットプロパティ説明
value

T

選択された値。

open

Boolean

Listbox が開いているかどうか。

disabled

Boolean

Listbox が無効になっているかどうか。

Listbox がスクリーンリーダーにアナウンスするテキストをより詳細に制御するために使用できるラベル。その id 属性は自動的に生成され、aria-labelledby 属性を介してルートの Listbox コンポーネントにリンクされます。

Propデフォルト説明
aslabel
String | Component

ListboxLabel がレンダリングする要素またはコンポーネント。

スロットプロパティ説明
open

Boolean

Listbox が開いているかどうか。

disabled

Boolean

Listbox が無効になっているかどうか。

カスタム Listbox のオプションリストを直接ラップするコンポーネント。

Propデフォルト説明
asul
String | Component

ListboxOptions がレンダリングする要素またはコンポーネント。

staticfalse
Boolean

要素が内部的に管理される開閉状態を無視するかどうか。

unmounttrue
Boolean

要素を開閉状態に基づいてアンマウントするか非表示にするかどうか。

スロットプロパティ説明
open

Boolean

Listbox が開いているかどうか。

Listbox 内の各項目をラップするために使用します。

Propデフォルト説明
value—
T

オプションの値。

asli
String | Component

ListboxOption がレンダリングする要素またはコンポーネント。

disabledfalse
Boolean

キーボードナビゲーションと ARIA の目的でオプションを無効にするかどうか。

スロットプロパティ説明
active

Boolean

オプションがアクティブ/フォーカスされたオプションであるかどうか。

selected

Boolean

オプションが選択されたオプションであるかどうか。

disabled

Boolean

キーボードナビゲーションと ARIA の目的でオプションを無効にするかどうか。

Headless UI と Tailwind CSS を使用した事前設計されたコンポーネントの例に興味がある場合は、当社が作成した美しくデザインされ、専門的に作成されたコンポーネントのコレクションである Tailwind UI をご確認ください。

これは、このようなオープンソースプロジェクトに対する当社の活動を支援し、それらの改善と保守を可能にする素晴らしい方法です。

その他の事前設計された例を見る→