Select

import { Select } from "@brijbyte/agentic-ui/select";

import "@brijbyte/agentic-ui/select.css";

export default function HighLevelDemo() {
  return (
    <div style={{ width: 220 }}>
      <Select
        placeholder="Choose a framework…"
        options={[
          { value: "react", label: "React" },
          { value: "vue", label: "Vue" },
          { value: "svelte", label: "Svelte" },
          { value: "solid", label: "SolidJS" },
          { value: "angular", label: "Angular", disabled: true },
        ]}
      />
    </div>
  );
}

import { useState } from "react";
import { Select as BaseSelect } from "@base-ui/react/select";
import {
  SelectTrigger,
  SelectValue,
  SelectPositioner,
  SelectPopup,
  SelectList,
  SelectItem,
  SelectItemText,
  SelectItemIndicator,
  SelectGroupContainer,
  SelectGroupLabel,
  SelectSeparator,
} from "@brijbyte/agentic-ui/select";

import "@brijbyte/agentic-ui/select.css";

export default function ComposedDemo() {
  const [value, setValue] = useState<string | null>(null);

  return (
    <div style={{ width: 220 }}>
      <BaseSelect.Root value={value} onValueChange={setValue}>
        <SelectTrigger>
          <SelectValue placeholder="Choose a model…" />
        </SelectTrigger>
        <BaseSelect.Portal>
          <SelectPositioner sideOffset={4}>
            <SelectPopup>
              <SelectList>
                <SelectGroupContainer>
                  <SelectGroupLabel>Anthropic</SelectGroupLabel>
                  {["claude-opus", "claude-sonnet", "claude-haiku"].map((m) => (
                    <SelectItem key={m} value={m}>
                      <SelectItemText>{m}</SelectItemText>
                      <SelectItemIndicator />
                    </SelectItem>
                  ))}
                </SelectGroupContainer>
                <SelectSeparator />
                <SelectGroupContainer>
                  <SelectGroupLabel>OpenAI</SelectGroupLabel>
                  {["gpt-4o", "gpt-4o-mini"].map((m) => (
                    <SelectItem key={m} value={m}>
                      <SelectItemText>{m}</SelectItemText>
                      <SelectItemIndicator />
                    </SelectItem>
                  ))}
                </SelectGroupContainer>
              </SelectList>
            </SelectPopup>
          </SelectPositioner>
        </BaseSelect.Portal>
      </BaseSelect.Root>
    </div>
  );
}