euedujbarrios-ui
Back to components

Inputs

Prompt Version Select

A styled select control for pinning prompt versions in AI release workflows.

promptversionselect

Installation

Copy and paste the code into your project.

Accessibility notes

The select is wrapped by a visible label so the control has a clear name.

Preview accent

TypeScript
const versions = ["v3.2 production", "v3.1 stable", "v2.9 fallback"];

export function PromptVersionSelect() {
  return (
    <label className="grid w-full max-w-sm gap-2 rounded-lg border border-white/12 bg-[#0b0f14]/82 p-4 shadow-2xl">
      <span className="text-xs font-semibold uppercase tracking-[0.18em] text-[#40E0D0]">Prompt version</span>
      <select className="rounded-md border border-[#40E0D0]/24 bg-white/[0.05] px-3 py-2.5 text-sm font-semibold text-white outline-none transition focus:border-[#40E0D0]/60">
        {versions.map((version) => (
          <option key={version}>{version}</option>
        ))}
      </select>
      <span className="text-xs text-slate-400">Pinned for deterministic release reviews</span>
    </label>
  );
}
Usage
<PromptVersionSelect />

Related components

Inputs

AI Chat Input

Intermediate

A responsive prompt composer with textarea, label, and high-contrast send button.

aichatform
View component

Use environment variables in production.

Inputs

API Key Field

Beginner

A guarded credential input for settings screens, integrations, and developer tools.

apisecuritysettings
View component

Upload queue

3 files
prompts.csvuploading
evals.jsonlready
screens.zipqueued

Inputs

Dataset Upload Queue

Intermediate

A file queue for prompt datasets, eval fixtures, and design reference uploads.

uploaddatasetqueue
View component