Select

Forms 1

About

A pill-shaped dropdown select with searchable keyboard navigation and optional per-option hints, ported to React from the Vue oyna-ui component library by azabroflovski.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Select to your project and fits it to your theme.

Code

How Select is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import * as React from "react";
import OSelect from "@/components/ui/o-select";

const languages = [
  { value: "en", label: "English", hint: "en" },
  { value: "uz", label: "Oʻzbekcha", hint: "uz" },
  { value: "ru", label: "Русский", hint: "ru" },
  { value: "de", label: "Deutsch", hint: "de", disabled: true },
];

export default function SelectDemo() {
  const [language, setLanguage] = React.useState("en");

  return (
    <div className="flex min-h-[240px] w-full items-center justify-center">
      <OSelect
        items={languages}
        value={language}
        onValueChange={setLanguage}
        aria-label="Language"
      />
    </div>
  );
}