@usevyre/react @usevyre/vue

Select

An accessible dropdown with keyboard navigation, controlled and uncontrolled modes, and per-option disabled state. Built from scratch — no native <select>.

Basic

import { Select } from "@usevyre/react";

const frameworks = [
  { value: "react", label: "React" },
  { value: "vue",   label: "Vue" },
  { value: "svelte",label: "Svelte", disabled: true },
];

// Uncontrolled
<Select options={frameworks} placeholder="Select framework" />

// Controlled
const [val, setVal] = useState("");
<Select
  options={frameworks}
  value={val}
  onChange={setVal}
  placeholder="Select framework"
/>

<script setup>
import { Select } from "@usevyre/vue";
const frameworks = [
  { value: "react", label: "React" },
  { value: "vue",   label: "Vue" },
  { value: "svelte",label: "Svelte", disabled: true },
];
const selected = ref("");
</script>
<template>
  <Select
    :options="frameworks"
    v-model="selected"
    placeholder="Select framework"
  />
</template>

Sizes

import { Field, Select } from "@usevyre/react";

<Field label="Framework" htmlFor="fw" state="error" hint="Required.">
  <Select id="fw" options={frameworks} placeholder="Pick one" />
</Field>

<Field label="Framework" html-for="fw" state="error" hint="Required.">
  <Select id="fw" :options="frameworks" placeholder="Pick one" />
</Field>

Keyboard navigation

Space / Enter opens the listbox. ↑ ↓ move between options. Enter selects. Escape closes without selection.

Props

Prop	Type	Default	Description
`options`	`{ value: string; label: string; disabled?: boolean }[]`	`—`	List of selectable options.
`value`	`string`	`—`	Controlled selected value.
`defaultValue`	`string`	`—`	Initial value (uncontrolled).
`placeholder`	`string`	`—`	Text shown when nothing is selected.
`onChange`	`(value: string) => void`	`—`	React only. Called when selection changes.
`disabled`	`boolean`	`false`	Disables the select.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Select height.
`class / className`	`string`	`—`	Additional CSS class.

AI Context

Valid props

Prop	Values	Default
`size`	`"sm"`\|`"md"`\|`"lg"`	`md`
`disabled`	`true`\|`false`	`false`

Common AI mistakes

Passing strings directly as children→ Pass options={[{ value: 'a', label: 'Option A' }]}

Quick examples

Controlled select

<Select
  options={[{ value: 'react', label: 'React' }, { value: 'vue', label: 'Vue' }]}
  value={framework}
  onChange={setFramework}
  placeholder="Choose framework"
/>

← Progress Separator →