Select

Dropdown select component with customizable content and elegant expand animation.

Basic Usage

The simplest select usage with options list via items prop.

<template>
  <u-select
    v-model="value"
    :items="['Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5']" />
</template>

<script setup>
  import { ref } from 'vue';
  const value = ref('Option 1');
</script>

Set Color

Set the color of selected state via color prop on u-option.

<template>
  <u-select v-model="value">
    <template #content>
      <u-option
        v-for="item in options"
        :key="item"
        :value="item"
        color="success">
        {{ item }}
      </u-option>
    </template>
  </u-select>
</template>

<script setup>
  import { ref } from 'vue';
  const value = ref('Option 1');
  const options = ['Option 1', 'Option 2', 'Option 3'];
</script>

Align Dropdown

Set dropdown alignment via align prop. Options include left, and right.

<template>
  <u-select
    v-model="value"
    align="right"
    style="width: 200px;"
    placeholder="Select a city">
    <template #content>
      <u-option
        style="width: 280px;"
        :value="item"
        v-for="item in ['Beijing', 'Shanghai', 'Guangzhou']"
        :key="item">
        {{ item }}
      </u-option>
    </template>
  </u-select>
</template>

<script setup>
  import { ref } from 'vue';
  const value = ref('');
</script>

Custom Trigger Content

Customize trigger display content via default slot.

Selected: Please Select

<template>
  <u-select v-model="value" :items="['Beijing', 'Shanghai', 'Guangzhou']">
    <span>Selected: {{ value || 'Please Select' }}</span>
  </u-select>
</template>

<script setup>
  import { ref } from 'vue';
  const value = ref('');
</script>

Disabled State

Disable the select via disabled prop.

<template>
  <u-select
    v-model="value"
    disabled
    :items="['Option 1', 'Option 2', 'Option 3']" />
</template>

<script setup>
  import { ref } from 'vue';
  const value = ref('Option 1');
</script>

Custom Dropdown Content

Use u-option component via content slot to customize dropdown options.

Selected: Please Select

<template>
  <u-select v-model="value">
    <span>Selected: {{ value || 'Please Select' }}</span>
    <template #content>
      <u-option :value="item.value" v-for="item in options" :key="item.value">
        {{ item.label }}
      </u-option>
    </template>
  </u-select>
</template>

<script setup>
  import { ref } from 'vue';
  const value = ref('');
  const options = [
    { value: 'beijing', label: 'Beijing' },
    { value: 'shanghai', label: 'Shanghai' },
    { value: 'guangzhou', label: 'Guangzhou' },
    { value: 'shenzhen', label: 'Shenzhen' },
  ];
</script>

Disabled Option

Set disabled prop on u-option to disable a specific option.

Selected: Please Select

<template>
  <u-select v-model="value">
    <span>Selected: {{ value || 'Please Select' }}</span>
    <template #content>
      <u-option
        :value="item.value"
        v-for="item in options"
        :key="item.value"
        :disabled="item.disabled">
        {{ item.label }}
      </u-option>
    </template>
  </u-select>
</template>

<script setup>
  import { ref } from 'vue';
  const value = ref('');
  const options = [
    { value: 'a', label: 'Option A', disabled: false },
    { value: 'b', label: 'Option B', disabled: true },
    { value: 'c', label: 'Option C', disabled: false },
  ];
</script>

Custom Option Style

Customize option style via height and radius props on u-option.

Selected: 1

<template>
  <u-select v-model="value">
    <span>Selected: {{ value || 'Please Select' }}</span>
    <template #content>
      <u-option height="48px" :value="i" v-for="i in 5">
        Option {{ i }}
      </u-option>
    </template>
  </u-select>
</template>

<script setup>
  import { ref } from 'vue';
  const value = ref(1);
</script>

USelect API

Property	Description	Type	Default
modelValue	Current selected value	string | number	-
disabled	Whether to disable the select	boolean	false
items	Options list	Array<string | number>	-
placeholder	Placeholder text	string	-

USelect Events

Event	Description	Type
change	Triggered when value changes	(value: string | number) => void

USelect Slots

Slot	Description
default	Trigger content
content	Dropdown content

UOption API

Property	Description	Type	Default
value	Option value	string | number	-
disabled	Whether to disable	boolean	false
color	Color of active state	'primary' | 'success' | 'warning' | 'error' | 'info'	-
radius	Border radius	string	-
height	Option height	string	-

UOption Slots

Slot	Description
default	Option content