{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "extends": "none",
  "name": "multiple-select-controlled-example",
  "title": "Multiple Select Controlled",
  "description": "multiple-select-controlled-example",
  "dependencies": [
    "react-aria-components"
  ],
  "registryDependencies": [
    "https://intentui.com/r/field",
    "https://intentui.com/r/multiple-select"
  ],
  "files": [
    {
      "path": "src/components/examples/pickers/multiple-select/multiple-select-controlled-example.tsx",
      "content": "'use client'\n\nimport { useState } from 'react'\nimport type { Key } from 'react-aria-components/Breadcrumbs'\nimport { Description, FieldError, Label } from '@/components/ui/field'\nimport {\n  MultipleSelect,\n  MultipleSelectContent,\n  MultipleSelectItem,\n} from '@/components/ui/multiple-select'\n\nconst tags = [\n  { id: 1, name: 'Travel' },\n  { id: 2, name: 'Food' },\n  { id: 3, name: 'Fashion' },\n  { id: 4, name: 'Music' },\n  { id: 5, name: 'Photography' },\n]\n\nexport default function MultipleSelectControlledDemo() {\n  const [selectedItems, setSelectedItems] = useState<Key[]>([2, 4])\n\n  return (\n    <MultipleSelect\n      className=\"mx-auto max-w-2xs\"\n      isRequired\n      value={selectedItems}\n      onChange={setSelectedItems}\n    >\n      <Label>Select tags</Label>\n      <MultipleSelectContent items={tags}>\n        {(item) => {\n          return (\n            <MultipleSelectItem id={item.id} textValue={item.name}>\n              {item.name}\n            </MultipleSelectItem>\n          )\n        }}\n      </MultipleSelectContent>\n      <Description>Select at least one tag.</Description>\n      <FieldError />\n    </MultipleSelect>\n  )\n}\n",
      "type": "registry:page",
      "target": "app/multiple-select-controlled-example/page.tsx"
    }
  ],
  "type": "registry:page"
}