MultiSelect

import { useState } from 'react';
import { MultiSelect } from '@components-kit/react';

const setFruits = (values: string[]) => {
  console.log('Selected fruits:', values);
};

const setFrameworks = (values: string[]) => {
  console.log('Selected frameworks:', values);
};

// Simple string options
<MultiSelect
  options={['apple', 'banana', 'cherry', 'date']}
  placeholder="Pick fruits..."
  onValueChange={setFruits}
/>

// Labeled options with disabled items
<MultiSelect
  options={[
    { value: 'apple', label: 'Apple' },
    { value: 'banana', label: 'Banana', disabled: true },
    { value: 'cherry', label: 'Cherry' },
  ]}
/>

// Grouped options
<MultiSelect
  options={[
    { type: 'group', label: 'Fruits', options: ['apple', 'banana'] },
    { type: 'separator' },
    { type: 'group', label: 'Vegetables', options: ['carrot', 'celery'] },
  ]}
/>

// Controlled mode
function ControlledMultiSelect() {
  const [selected, setSelected] = useState<string[]>(['apple']);

  return (
    <MultiSelect
      options={['apple', 'banana', 'cherry']}
      value={selected}
      onValueChange={setSelected}
    />
  );
}

// Max selected limit
<MultiSelect
  options={['apple', 'banana', 'cherry', 'date', 'elderberry']}
  maxSelected={3}
  onValueChange={setFruits}
/>

// Clearable with clear-all button
<MultiSelect
  options={['React', 'Vue', 'Angular', 'Svelte']}
  clearable
  onValueChange={setFrameworks}
/>

// Fixed non-removable tags
<MultiSelect
  options={['React', 'Vue', 'Angular', 'Svelte']}
  clearable
  fixedValues={['React']}
  defaultValue={['React', 'Vue']}
/>

// Token separators (paste comma-separated values)
<MultiSelect
  options={['React', 'Vue', 'Angular', 'Svelte']}
  tokenSeparators={[',', ';']}
  placeholder="Type or paste comma-separated..."
/>

// Read-only mode
<MultiSelect
  options={['React', 'Vue', 'Angular']}
  value={['React', 'Vue']}
  readOnly
/>

// Error state
<MultiSelect
  options={['React', 'Vue', 'Angular']}
  error
  placeholder="Invalid selection..."
/>

// Custom placement (opens upward)
<MultiSelect
  options={['React', 'Vue', 'Angular']}
  placement="top-start"
  placeholder="Opens upward..."
/>

// Tag overflow with "+N more"
<MultiSelect
  options={['React', 'Vue', 'Angular', 'Svelte', 'Solid']}
  maxDisplayedTags={2}
  defaultValue={['React', 'Vue', 'Angular', 'Svelte']}
/>

// Form integration (hidden inputs)
<form>
  <MultiSelect
    options={['React', 'Vue', 'Angular']}
    name="frameworks"
    required
  />
</form>

// String option
'apple'

// Labeled option
{ value: 'apple', label: 'Apple', disabled?: boolean }

// Group
{ type: 'group', label: 'Fruits', options: [...] }

// Separator
{ type: 'separator' }

import { useState } from "react";

interface User {
  id: number;
  name: string;
  email: string;
}

const users: User[] = [
  { id: 1, name: "Alice", email: "alice@example.com" },
  { id: 2, name: "Bob", email: "bob@example.com" },
  { id: 3, name: "Charlie", email: "charlie@example.com" },
];

function UserMultiSelect() {
  const [selectedUsers, setSelectedUsers] = useState<User[]>([]);

  return (
    <MultiSelect<User>
      options={users.map((user) => ({
        value: user,
        label: user.name,
      }))}
      value={selectedUsers}
      onValueChange={setSelectedUsers}
      getOptionValue={(user) => user.id}
      placeholder="Select team members..."
    />
  );
}

import { MultiSelect } from "@components-kit/react";
import { Controller, useForm } from "react-hook-form";

interface FormValues {
  frameworks: string[];
}

function MultiSelectForm() {
  const { control, handleSubmit } = useForm<FormValues>({
    defaultValues: { frameworks: [] },
  });

  return (
    <form onSubmit={handleSubmit((data) => console.log(data))}>
      <Controller
        control={control}
        name="frameworks"
        rules={{ validate: (v) => v.length > 0 || "Select at least one" }}
        render={({ field, fieldState }) => (
          <MultiSelect
            options={["React", "Vue", "Angular", "Svelte"]}
            value={field.value}
            onValueChange={field.onChange}
            error={!!fieldState.error}
            placeholder="Select frameworks..."
          />
        )}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

<MultiSelect
  aria-label="Select team members"
  options={teamMembers}
  placeholder="Choose members..."
  variantName="default"
/>

<label htmlFor="team-select">Team Members</label>
<MultiSelect
  id="team-select"
  options={teamMembers}
  placeholder="Choose members..."
  variantName="default"
/>