Components / Forms

Select

A select-only combobox with keyboard navigation and typeahead.

Preview

Install

Run in your project

npx @getweini/cli@latest add select

Use cases

Known category

Select one value from a short fixed list with keyboard typeahead.

Optional filter

Allow the user to clear an already selected filter.

Usage example

Vue

<script setup lang="ts">
import { ref } from 'vue'
import Select from './components/ui/select/Select.vue'
import SelectTrigger from './components/ui/select/SelectTrigger.vue'
import SelectValue from './components/ui/select/SelectValue.vue'
import SelectContent from './components/ui/select/SelectContent.vue'
import SelectOption from './components/ui/select/SelectOption.vue'
const country = ref<string>()
</script>

<template>
  <label for="country">Country</label>
  <Select id="country" v-model="country">
    <SelectTrigger><SelectValue placeholder="Choose a country" /></SelectTrigger>
    <SelectContent>
      <SelectOption value="LU">Luxembourg</SelectOption>
      <SelectOption value="BE">Belgium</SelectOption>
    </SelectContent>
  </Select>
</template>

More examples

Support priority

Compose the trigger and options from the public children.

Support priority

<script setup lang="ts">
import { ref } from 'vue'
import Select from './components/ui/select/Select.vue'
import SelectTrigger from './components/ui/select/SelectTrigger.vue'
import SelectValue from './components/ui/select/SelectValue.vue'
import SelectContent from './components/ui/select/SelectContent.vue'
import SelectOption from './components/ui/select/SelectOption.vue'
const priority = ref<string>()
</script>
<template>
  <label for="priority">Priority</label>
  <Select id="priority" v-model="priority" name="priority" required>
    <SelectTrigger><SelectValue placeholder="Choose priority" /></SelectTrigger>
    <SelectContent>
      <SelectOption value="normal">Normal</SelectOption>
      <SelectOption value="urgent">Urgent</SelectOption>
    </SelectContent>
  </Select>
</template>

Clearable status filter

The clear action needs its own accessible name.

Clearable status filter

<script setup lang="ts">
import { ref } from 'vue'
import Select from './components/ui/select/Select.vue'
const status = ref<string>()
const options = [{ label: 'Open', value: 'open' }, { label: 'Closed', value: 'closed' }]
</script>
<template>
  <label for="status">Status</label>
  <Select id="status" v-model="status" :options="options" placeholder="Any status" clearable clear-label="Clear status" />
</template>

Key API

The most useful props, models, slots, events, and methods for this component.

Key API for Select
Name	Type	Default or requirement
`v-model`	T \| undefined	undefined
`open / defaultOpen`	boolean	false
`defaultValue`	T	undefined
`clearable / clearLabel`	boolean / string	false / required if clearable
`SelectTrigger.showIndicator`	boolean	true
`disabled / required / invalid`	boolean	false
`by / serialize`	functions for object values	Object.is / String

Arrow keys move through options without changing the value. Select with Enter or Space; Escape and Tab close without selecting. Give the field a label. With clearable enabled, the clear button replaces the chevron.

Implementation notes

The options prop is a compatibility shortcut; compound children support grouped and rich content.
The model is committed on selection; moving the active option with arrows does not update it.

Accessibility and localization

Name the field with an associated label. Supply textValue for options with rich visual markup so typeahead and the closed value remain meaningful.