ComboBox

"use client"

import { ComboBox, ComboBoxItem } from "@/components/ui/combobox"

const frameworks = [
  { id: "next.js", name: "Next.js" },
  { id: "sveltekit", name: "SvelteKit" },
  { id: "nuxt.js", name: "Nuxt.js" },
  { id: "remix", name: "Remix" },
  { id: "astro", name: "Astro" },
  { id: "vue", name: "Vue" },
  { id: "angular", name: "Angular" },
]

export function ComboboxDemo() {
  return (
    <ComboBox
      label="Favorite Framework"
      placeholder="Search framework..."
      className="w-full max-w-xs"
    >
      {frameworks.map((framework) => (
        <ComboBoxItem
          key={framework.id}
          id={framework.id}
          textValue={framework.name}
        >
          {framework.name}
        </ComboBoxItem>
      ))}
    </ComboBox>
  )
}

import {
  ComboBox,
  ComboBoxItem,
  ComboBoxSection,
} from "@/components/ui/combobox"

export function ComboboxSections() {
  return (
    <ComboBox
      label="Select Language"
      placeholder="Search languages..."
      className="w-full max-w-xs"
    >
      <ComboBoxSection title="Popular">
        <ComboBoxItem id="js" textValue="JavaScript">
          JavaScript
        </ComboBoxItem>
        <ComboBoxItem id="ts" textValue="TypeScript">
          TypeScript
        </ComboBoxItem>
        <ComboBoxItem id="python" textValue="Python">
          Python
        </ComboBoxItem>
      </ComboBoxSection>
      <ComboBoxSection title="Web">
        <ComboBoxItem id="html" textValue="HTML">
          HTML
        </ComboBoxItem>
        <ComboBoxItem id="css" textValue="CSS">
          CSS
        </ComboBoxItem>
        <ComboBoxItem id="php" textValue="PHP">
          PHP
        </ComboBoxItem>
      </ComboBoxSection>
      <ComboBoxSection title="Systems">
        <ComboBoxItem id="rust" textValue="Rust">
          Rust
        </ComboBoxItem>
        <ComboBoxItem id="go" textValue="Go">
          Go
        </ComboBoxItem>
        <ComboBoxItem id="c" textValue="C">
          C
        </ComboBoxItem>
        <ComboBoxItem id="cpp" textValue="C++">
          C++
        </ComboBoxItem>
      </ComboBoxSection>
    </ComboBox>
  )
}

"use client"

import { useState } from "react"

import { ComboBox, ComboBoxItem } from "@/components/ui/combobox"

const countries = [
  { id: "us", name: "United States" },
  { id: "uk", name: "United Kingdom" },
  { id: "ca", name: "Canada" },
  { id: "au", name: "Australia" },
  { id: "de", name: "Germany" },
  { id: "fr", name: "France" },
  { id: "jp", name: "Japan" },
  { id: "in", name: "India" },
]

export function ComboboxControlled() {
  const [selectedKey, setSelectedKey] = useState<string | null>(null)

  return (
    <div className="space-y-4">
      <ComboBox
        label="Select Country"
        placeholder="Search countries..."
        className="w-full max-w-xs"
        selectedKey={selectedKey}
        onSelectionChange={(key) => setSelectedKey(key as string)}
      >
        {countries.map((country) => (
          <ComboBoxItem
            key={country.id}
            id={country.id}
            textValue={country.name}
          >
            {country.name}
          </ComboBoxItem>
        ))}
      </ComboBox>
      {selectedKey && (
        <p className="text-muted-foreground text-sm">
          Selected: {countries.find((c) => c.id === selectedKey)?.name}
        </p>
      )}
    </div>
  )
}

import { ComboBox, ComboBoxItem } from "@/components/ui/combobox"

const editors = [
  { id: "vscode", name: "Visual Studio Code" },
  { id: "sublime", name: "Sublime Text" },
  { id: "atom", name: "Atom" },
  { id: "vim", name: "Vim" },
  { id: "neovim", name: "Neovim" },
  { id: "emacs", name: "Emacs" },
]

export function ComboboxDescription() {
  return (
    <ComboBox
      label="Code Editor"
      description="Choose your preferred code editor for development."
      placeholder="Search editors..."
      className="w-full max-w-xs"
    >
      {editors.map((editor) => (
        <ComboBoxItem key={editor.id} id={editor.id} textValue={editor.name}>
          {editor.name}
        </ComboBoxItem>
      ))}
    </ComboBox>
  )
}

import { ComboBox, ComboBoxItem } from "@/components/ui/combobox"

const options = [
  { id: "option1", name: "Option 1" },
  { id: "option2", name: "Option 2" },
  { id: "option3", name: "Option 3" },
]

export function ComboboxDisabled() {
  return (
    <ComboBox
      label="Disabled ComboBox"
      placeholder="Cannot interact..."
      className="w-full max-w-xs"
      isDisabled
    >
      {options.map((option) => (
        <ComboBoxItem key={option.id} id={option.id} textValue={option.name}>
          {option.name}
        </ComboBoxItem>
      ))}
    </ComboBox>
  )
}

"use client"

import { ComboBox, ComboBoxItem } from "@/components/ui/combobox"

const priorities = [
  { id: "low", name: "Low" },
  { id: "medium", name: "Medium" },
  { id: "high", name: "High" },
  { id: "urgent", name: "Urgent" },
]

export function ComboboxValidation() {
  return (
    <ComboBox
      label="Priority"
      placeholder="Select priority..."
      className="w-full max-w-xs"
      isRequired
      errorMessage="Please select a priority level."
    >
      {priorities.map((priority) => (
        <ComboBoxItem
          key={priority.id}
          id={priority.id}
          textValue={priority.name}
        >
          {priority.name}
        </ComboBoxItem>
      ))}
    </ComboBox>
  )
}