Multi Select

"use client"

import * as React from "react"

import { Field, FieldLabel } from "@/components/ui/field"
import { MultiSelect } from "@/components/ui/multi-select"

const SKILL_OPTIONS = [
  { value: "react", label: "React" },
  { value: "typescript", label: "TypeScript" },
  { value: "figma", label: "Figma" },
  { value: "python", label: "Python" },
  { value: "node", label: "Node.js" },
]

export default function MultiSelectDemo() {
  const [skills, setSkills] = React.useState<string[]>(["react", "typescript"])

  return (
    <Field className="w-full max-w-sm">
      <FieldLabel id="skills-label">Skills</FieldLabel>
      <MultiSelect
        aria-labelledby="skills-label"
        options={SKILL_OPTIONS}
        value={skills}
        onValueChange={setSkills}
        creatable
        placeholder="Add skills…"
        className="w-full"
      />
    </Field>
  )
}

"use client"

import * as React from "react"

import { Field, FieldLabel } from "@/components/ui/field"
import { MultiSelect } from "@/components/ui/multi-select"

const LANGUAGE_OPTIONS = [
  { value: "english", label: "English" },
  { value: "german", label: "German" },
  { value: "spanish", label: "Spanish" },
  { value: "french", label: "French" },
  { value: "slovak", label: "Slovak" },
]

export default function MultiSelectPreset() {
  const [languages, setLanguages] = React.useState<string[]>([
    "english",
    "german",
  ])

  return (
    <Field className="w-full max-w-sm">
      <FieldLabel id="languages-label">Languages</FieldLabel>
      <MultiSelect
        aria-labelledby="languages-label"
        options={LANGUAGE_OPTIONS}
        value={languages}
        onValueChange={setLanguages}
        placeholder="Select languages…"
        className="w-full"
      />
    </Field>
  )
}