Select

Choose from a clear list of options.

Basic usage

Live preview

Display modeChoose how much information the current scene shows.

Selected: focus

Launch modeChoose an available mode before launching.

Unavailable select

View Vue source

Vue · TypeScript

<script setup lang="ts">
import { AgmButton, AgmSelect } from 'augma'
import { shallowRef } from 'vue'

const mode = shallowRef('focus')
const destination = shallowRef<string>()
const submitted = shallowRef(false)
const options = [
  { label: 'Focus mode', value: 'focus' },
  { label: 'Explore mode', value: 'explore' },
  { label: 'Unavailable mode', value: 'locked', disabled: true },
]
</script>

<template>
  <div class="example-stack">
    <AgmSelect v-model="mode" label="Display mode" hint="Choose how much information the current scene shows." :options="options" />
    <output>Selected: {{ mode }}</output>
    <AgmSelect
      v-model="destination"
      label="Launch mode"
      hint="Choose an available mode before launching."
      placeholder="Select a mode"
      :error="submitted && !destination ? 'Choose a launch mode' : undefined"
      :options="options"
      required
    />
    <AgmButton variant="outline" @click="submitted = true">Confirm launch mode</AgmButton>
    <output v-if="submitted && destination" role="status">Launch mode confirmed.</output>
    <AgmSelect label="Unavailable select" placeholder="Select a mode" :options="options" disabled />
  </div>
</template>

<style scoped>
.example-stack {
  display: grid;
  gap: 24px;
  width: 100%;
  max-width: 360px;
}
</style>

API

Prop	Type	Default	Description
id	string	undefined	Optional ID for the trigger element; generated by default
hint	string	undefined	Helper text linked to the select and kept while an error shows
error	string	undefined	Error message; also marks the field invalid
required	boolean	false	Required form field
modelValue	string	undefined	Updated through v-model
label	string	Required	Visible label
options	{ label: string, value: string, disabled?: boolean }[]	Required	Each value must be a unique, non-empty string
placeholder	string	'请选择'	Text shown before a choice is made
disabled	boolean	false	Blocks selection
name	string	undefined	Form field name

Events

• update:modelValue(string)

Keyboard and usage notes

Enter / Space opens, arrow keys move, Enter selects and Escape closes; type-ahead search skips disabled options. class / style stay on the field wrapper, other attributes and listeners go to the trigger button; hint / error are linked automatically.

Installation

import { AgmSelect } from 'augma'
import 'augma/style.css'