Select

A floating label select with a teleported menu and click-catcher overlay.

Installation

npx alixan-ui-nuxt add select

Usage

Design

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

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

Validation

Design

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

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

API Reference

Prop	Type	Default	Description
modelValue	string \| number \| null	null	Selected option value used by v-model.
label	string	-	Floating label text.
placeholder	string	'Select option'	Text shown when no option is selected.
options	SelectOption[]	[]	Options list with label, value and optional disabled.
disabled	boolean	false	Disables select interaction.
teleport	boolean	true	Teleports menu to body. Keep true for nested popovers; set false only when the menu must stay inside the local layout.
required	boolean	false	Shows the required validation message when no option is selected.
error	string	''	External validation message shown after the select is touched.