{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "extends": "none",
  "name": "checkbox-group-controlled-example",
  "title": "Checkbox Group Controlled",
  "description": "checkbox-group-controlled-example",
  "registryDependencies": [
    "https://intentui.com/r/checkbox",
    "https://intentui.com/r/field"
  ],
  "files": [
    {
      "path": "src/components/examples/forms/checkbox/checkbox-group-controlled-example.tsx",
      "content": "'use client'\n\nimport { useState } from 'react'\n\nimport { Checkbox, CheckboxField, CheckboxGroup } from '@/components/ui/checkbox'\nimport { Description, Label } from '@/components/ui/field'\n\nexport default function CheckboxGroupControlledExample() {\n  const [values, setValues] = useState<string[]>([])\n  return (\n    <>\n      <CheckboxGroup value={values} onChange={setValues} name=\"options\">\n        <Label>Options</Label>\n        <CheckboxField value=\"sound\">\n          <Checkbox>Sound</Checkbox>\n        </CheckboxField>\n        <CheckboxField value=\"wifi\">\n          <Checkbox>Wi-Fi</Checkbox>\n        </CheckboxField>\n        <CheckboxField value=\"sync\">\n          <Checkbox>Sync</Checkbox>\n        </CheckboxField>\n      </CheckboxGroup>\n\n      <Description className=\"mt-2 flex h-10 flex-col gap-y-1 [&>strong]:font-medium [&>strong]:text-fg\">\n        {values.length > 0 ? (\n          <>\n            Selected values <strong className=\"font-medium\">{values.join(', ')}</strong>\n          </>\n        ) : (\n          'No values selected'\n        )}\n      </Description>\n    </>\n  )\n}\n",
      "type": "registry:page",
      "target": "app/checkbox-group-controlled-example/page.tsx"
    }
  ],
  "type": "registry:page"
}