Select

An accessible dropdown select control with a styled trigger, searchable item list, grouping, multi-select and a native-select fallback, for choosing one or more options from a list in a form.

bysages

bybysages

"use client";

import { NativeSelect } from "@/components/ui/select";
import { useEffect, useState } from "react";
import { applyTheme } from "@bysages/core";

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

export default function SelectNativeDemo() {
  useEffect(() => {
    applyTheme({ mode: "light" });
  }, []);
  const [value, setValue] = useState("");

  return (
    <div className="flex min-h-[20rem] w-full items-center justify-center bg-background p-10 text-foreground">
      <div className="flex w-72 flex-col gap-4">
        <NativeSelect
          value={value}
          onValueChange={setValue}
          options={frameworks}
          placeholder="Choose a framework"
        />
        <NativeSelect options={frameworks} value="vue" />
      </div>
    </div>
  );
}