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 { Select } from "@/components/ui/select";
import { useEffect, useState } from "react";
import { createListCollection } from "@ark-ui/react/select";
import { applyTheme } from "@bysages/core";

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

function ChevronsUpDown() {
  return (
    <svg
      width={14}
      height={14}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={1.75}
      aria-hidden="true"
    >
      <path d="m7 9 5-5 5 5M7 15l5 5 5-5" />
    </svg>
  );
}

function Check() {
  return (
    <svg
      width={14}
      height={14}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={2}
      aria-hidden="true"
    >
      <path d="m4 12.5 5 5L20 6.5" />
    </svg>
  );
}

function X() {
  return (
    <svg
      width={14}
      height={14}
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={1.75}
      aria-hidden="true"
    >
      <path d="M6 6l12 12M18 6 6 18" />
    </svg>
  );
}

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

  return (
    <div className="flex min-h-[20rem] w-full items-center justify-center bg-background p-10 text-foreground">
      <Select.Root
        collection={frameworks}
        value={value}
        onValueChange={(details) => setValue(details.value)}
      >
        <Select.Label>Framework</Select.Label>
        <Select.Control>
          <Select.Trigger>
            <Select.ValueText placeholder="Select" />
          </Select.Trigger>
          <Select.ClearTrigger>
            <X />
          </Select.ClearTrigger>
          <Select.Indicator>
            <ChevronsUpDown />
          </Select.Indicator>
        </Select.Control>
        <Select.Positioner>
          <Select.Content>
            {frameworks.items.map((item) => (
              <Select.Item key={item.value} item={item}>
                <Select.ItemText>{item.label}</Select.ItemText>
                <Select.ItemIndicator>
                  <Check />
                </Select.ItemIndicator>
              </Select.Item>
            ))}
          </Select.Content>
        </Select.Positioner>
        <Select.HiddenSelect />
      </Select.Root>
    </div>
  );
}