Select

Dropdown select built on Nuxt UI's USelectMenu with form field wrapper, v-model support, and optional creatable mode.

<script setup lang="ts">
import RyderSelect from "@opeolluwa/ryder/components/primitives/Select.vue"
import { ref } from "vue";

const items = ref(["apple", "banana"]);
const value = ref("");
</script>

<template>
  <RyderSelect v-model="value" :items="items" label="Fruit" />
</template>

Examples

Basic

<script setup lang="ts">
import Select from "../../../src/components/primitives/Select.vue";
import { ref } from "vue";

const items = ref([
  { label: "Apple", value: "apple" },
  { label: "Banana", value: "banana" },
  { label: "Orange", value: "orange" },
]);
const value = ref("");
</script>

<template>
  <div class="flex flex-col gap-4">
    <Select
      v-model="value"
      label="Fruit"
      placeholder="Select a fruit"
      :items="items"
    />
    <p class="text-sm text-muted">{{ value }}</p>
  </div>
</template>

Creatable

Allows typing new values not in items; emits @create so parent can append.

<script setup lang="ts">
import Select from "../../../src/components/primitives/Select.vue";
import { ref } from "vue";

const items = ref([
  { label: "Apple", value: "apple" },
  { label: "Banana", value: "banana" },
  { label: "Orange", value: "orange" },
]);
const value = ref("");

function handleCreate(term: string) {
  const newValue = term.toLowerCase().trim();
  if (!newValue) return;
  const exists = items.value.some((item) => {
    const itemValue = typeof item === "string" ? item : item.value;
    return itemValue.toLowerCase() === newValue;
  });
  if (!exists) {
    items.value.push({ label: term, value: newValue });
  }
  value.value = newValue;
}
</script>

<template>
  <div class="flex flex-col gap-4">
    <Select
      v-model="value"
      label="Fruit"
      placeholder="Type to add new fruit"
      :items="items"
      creatable
      @create="handleCreate"
    />
    <p class="text-sm text-muted">{{ value }}</p>
  </div>
</template>

Props

Prop	Type	Default	Description
label	string	undefined	Field label.
icon	string	undefined	Leading icon name.
className	string	undefined	Additional classes for select.
name	string	undefined	Field name for form validation.
trailingIcon	string	undefined	Trailing icon name.
placeholder	string	undefined	Placeholder text.
hint	string	undefined	Hint text below field.
avatar	string	undefined	Avatar image src passed to USelectMenu.
disabled	boolean	false	Disable the select.
preserveCase	boolean	false	Preserve case instead of lowercasing.
size	"xs" | "sm" | "md" | "lg" | "xl"	"md"	Select size.
items	string[] | { label: string; value: string }[]	undefined	Required: list of options.
labelClass	string	undefined	Additional classes for label.
creatable	boolean	false	Allow creating new items; emits create event.

Emits

Event	Payload	When
create	[term: string]	When a new item is created in creatable mode.

Slots

None.

Notes

• Uses v-model with defineModel<string>().
• Adjusts placeholder text size based on size prop (matches Input).
• When creatable is true, the typed term is emitted via @create — parent must append to items for it to remain selectable (see examples).
• value-key="value" is set; items can be strings or objects with label/value.