cosscom__coss/apps/ui/public/r/select-with-groups.json

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "select-with-groups",
  "type": "registry:example",
  "description": "Select items grouped with labels",
  "registryDependencies": ["@coss/select"],
  "files": [
    {
      "path": "registry/default/examples/select-with-groups.tsx",
      "content": "import {\n  Select,\n  SelectGroup,\n  SelectGroupLabel,\n  SelectItem,\n  SelectPopup,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/default/ui/select\"\n\nconst placeholder = [{ label: \"Select framework\", value: null }]\n\nconst frontend = [\n  { label: \"Next.js\", value: \"next\" },\n  { label: \"Vite\", value: \"vite\" },\n  { label: \"Astro\", value: \"astro\" },\n]\n\nconst backend = [\n  { label: \"Express\", value: \"express\" },\n  { label: \"NestJS\", value: \"nestjs\" },\n  { label: \"Fastify\", value: \"fastify\" },\n  { label: \"Django\", value: \"django\" },\n  { label: \"Flask\", value: \"flask\" },\n  { label: \"Rails\", value: \"rails\" },\n]\n\nexport default function SelectWithGroups() {\n  return (\n    <Select\n      items={[...placeholder, ...frontend, ...backend]}\n      aria-label=\"Select framework\"\n    >\n      <SelectTrigger>\n        <SelectValue />\n      </SelectTrigger>\n      <SelectPopup>\n        <SelectGroup>\n          <SelectGroupLabel>Frontend</SelectGroupLabel>\n          {frontend.map(({ label, value }) => (\n            <SelectItem key={value} value={value}>\n              {label}\n            </SelectItem>\n          ))}\n        </SelectGroup>\n        <SelectSeparator />\n        <SelectGroup>\n          <SelectGroupLabel>Backend</SelectGroupLabel>\n          {backend.map(({ label, value }) => (\n            <SelectItem key={value} value={value}>\n              {label}\n            </SelectItem>\n          ))}\n        </SelectGroup>\n      </SelectPopup>\n    </Select>\n  )\n}\n",
      "type": "registry:example"
    }
  ],
  "categories": ["select"]
}