Multi-select with chips in a FormField

A multi-select Combobox composed inside FormField. Selected tags render as removable chips; Backspace removes the last. Shows the FieldContext boundary.

Combobox FormField

Preview

Source

apps/docs/app/recipes/combobox-multi/recipe.tsx

'use client';

import { useState } from 'react';
import { Combobox, FormField, FormProvider, type ComboboxOption } from '@hey-mike/tungsten';

const SKILLS: ComboboxOption[] = [
  { id: 'ts', label: 'TypeScript' },
  { id: 'react', label: 'React' },
  { id: 'css', label: 'CSS' },
  { id: 'node', label: 'Node.js' },
  { id: 'rust', label: 'Rust' },
  { id: 'go', label: 'Go' },
];

export default function ComboboxMultiRecipe() {
  const [keys, setKeys] = useState<ComboboxOption['id'][]>(['ts', 'react']);
  return (
    <FormProvider>
      <form className="w-80">
        <FormField name="skills" label="Skills">
          <Combobox
            mode="multiple"
            options={SKILLS}
            selectedKeys={keys}
            onSelectionChange={setKeys}
            placeholder="Add a skill…"
          />
        </FormField>
      </form>
    </FormProvider>
  );
}

'use client';

import { useState } from 'react';
import { Combobox, FormField, FormProvider, type ComboboxOption } from '@hey-mike/tungsten';

const SKILLS: ComboboxOption[] = [
  { id: 'ts', label: 'TypeScript' },
  { id: 'react', label: 'React' },
  { id: 'css', label: 'CSS' },
  { id: 'node', label: 'Node.js' },
  { id: 'rust', label: 'Rust' },
  { id: 'go', label: 'Go' },
];

export default function ComboboxMultiRecipe() {
  const [keys, setKeys] = useState<ComboboxOption['id'][]>(['ts', 'react']);
  return (
    <FormProvider>
      <form className="w-80">
        <FormField name="skills" label="Skills">
          <Combobox
            mode="multiple"
            options={SKILLS}
            selectedKeys={keys}
            onSelectionChange={setKeys}
            placeholder="Add a skill…"
          />
        </FormField>
      </form>
    </FormProvider>
  );
}