Select

Installation

Install from the Vuzeno registry:

      Copy
      bunx --bun shadcn-vue@latest add https://vuzeno.com/r/select.json
    

      Copy
      npx shadcn-vue@latest add https://vuzeno.com/r/select.json
    

      Copy
      yarn dlx shadcn-vue@latest add https://vuzeno.com/r/select.json
    

      Copy
      pnpm dlx shadcn-vue@latest add https://vuzeno.com/r/select.json
    

Usage

      Copy
      <script setup lang="ts">
import { Select } from "@/components/ui/select";
</script>

<template>
  <Select.Root>
    <Select.Label>Label</Select.Label>

    <Select.Trigger>
      <Select.Value />
    </Select.Trigger>

    <Select.Content>
      <Select.Item value="option-1">Option 1</Select.Item>
      <Select.Item value="option-2">Option 2</Select.Item>
      <Select.Item value="option-3">Option 3</Select.Item>
    </Select.Content>
  </Select.Root>
</template>
    

Composition

      Copy
      Select.Root
├── Select.Label
├── Select.Trigger
│   └── Select.Value
├── Select.Indicators
│   ├── Select.ClearTrigger
│   └── Select.Indicator
├── Select.Content
│   └── Select.ItemGroup
│       ├── Select.ItemGroupLabel
│       └── Select.Item
│           ├── Select.ItemText
│           └── Select.ItemIndicator
├── Select.Context
└── Select.RootProvider
    

Examples

Controlled

Use the value and onValueChange props to control the selected items.

Root Provider

An alternative way to control the select is to use the RootProvider component and the useSelect hook. This way you can access the state and methods from outside the component.

Multiple

To enable multiple item selection:

Grouping

Grouping related options can be useful for organizing options into categories.

• Use the groupBy prop to configure the grouping of the items.
• Use the collection.group() method to get the grouped items.
• Use the Select.ItemGroup and Select.ItemGroupLabel components to render the grouped items.

Field

Use Field to manage form state, ARIA labels, helper text, and error text.

Form Usage

Here's an example of integrating the Select component with a form.

Async Loading

Here's an example of how to load the items asynchronously when the select is opened.

Lazy Mount

Use lazyMount and unmountOnExit to control when content is mounted, improving performance.

Select on Highlight

Here's an example of automatically selecting items when they are highlighted (hovered or navigated to with keyboard).

Max Selection

Here's an example of limiting the number of items that can be selected in a multiple select.

Select All

Use selectAll() from the select context to select all items at once.

Overflow

For selects with many items, use positioning.fitViewport to ensure the dropdown fits within the viewport. Combine with a max-height on the content to enable scrolling.

API

See Ark UI Select docs for full props and examples.