Выбор

Select с floating label, teleported menu и click-catcher overlay.

Установка

npx alixan-ui-nuxt add select

Использование

Design

<script setup lang="ts">
const value = ref('alixan')
const options = [
  { label: 'Alixan UI', value: 'alixan' },
  { label: 'Cupertino', value: 'cupertino' },
  { label: 'Material', value: 'material', disabled: true },
]
</script>

<template>
  <Select v-model="value" label="Design" :options="options" />
</template>

Валидация

Design

<script setup lang="ts">
const value = ref(null)
const options = [
  { label: 'Alixan UI', value: 'alixan' },
  { label: 'Cupertino', value: 'cupertino' },
  { label: 'Material', value: 'material', disabled: true },
]
</script>

<template>
  <Select v-model="value" label="Design" :options="options" required />
</template>

Справочник API

Свойство	Тип	По умолчанию	Описание
modelValue	string \| number \| null	null	Выбранное значение option, используемое через v-model.
label	string	-	Текст floating label.
placeholder	string	'Select option'	Текст, отображаемый когда option не выбран.
options	SelectOption[]	[]	Список options с label, value и optional disabled.
disabled	boolean	false	Отключает взаимодействие с select.
teleport	boolean	true	Телепортирует menu в body. Оставляйте true для nested popovers; ставьте false только если menu должна остаться внутри local layout.
required	boolean	false	Показывает сообщение обязательного поля, если option не выбрана.
error	string	''	Внешнее сообщение валидации, отображаемое после взаимодействия с select.