MultiSelect

"use client";
import { useState, useEffect } from "react";
import { Card, MultiSelect } from "@g4rcez/components";

const defaults = [
  { label: "C#", value: "csharp" },
  { label: "Elixir", value: "elixir" },
  { label: "JavaScript", value: "javascript" },
  { label: "TypeScript", value: "typescript" },
  { label: "Python", value: "python" },
];

function BasicMultiSelect() {
  const [options, setOptions] = useState([]);
  const [value, setValue] = useState<string[]>([]);

  useEffect(() => {
    setOptions(defaults);
  }, []);

  return (
    <Card>
      <MultiSelect
        id="basic-multiselect"
        required
        options={options}
        title="Programming Languages"
        placeholder="Select your languages"
        onChangeOptions={setValue}
      />
      <div className="mt-4">
        <p>Selected: {JSON.stringify(value)}</p>
      </div>
    </Card>
  );
}

"use client";
import { Card, MultiSelect } from "@g4rcez/components";

function EmptyMultiSelect() {
  const [value, setValue] = useState<string[]>([]);
  return (
    <Card>
      <MultiSelect
        id="empty-multiselect"
        required
        options={[]}
        title="Empty Options"
        onChangeOptions={setValue}
        placeholder="No options to select"
      />
    </Card>
  );
}

import { MultiSelect } from "@g4rcez/components";

function MultiSelectSizes() {
  return (
    <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
      <MultiSelect size="normal" title="Normal multi-select" options={defaults} placeholder="Choose your languages" />
      <MultiSelect size="small" title="Small multi-select" options={defaults} placeholder="Choose your languages" />
    </div>
  );
}