select-example.json — ui Source File

Source Code

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "select-example",
  "title": "Select",
  "registryDependencies": [
    "button",
    "dialog",
    "field",
    "input",
    "item",
    "native-select",
    "select",
    "example"
  ],
  "files": [
    {
      "path": "registry/radix-vega/examples/select-example.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-vega/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/radix-vega/ui/field\"\nimport { Input } from \"@/registry/radix-vega/ui/input\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-vega/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/radix-vega/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-vega/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SelectExample() {\n  return (\n    <ExampleWrapper>\n      <SelectBasic />\n      <SelectWithIcons />\n      <SelectWithGroups />\n      <SelectLargeList />\n      <SelectSizes />\n      <SelectPlan />\n      <SelectWithButton />\n      <SelectItemAligned />\n      <SelectWithField />\n      <SelectInvalid />\n      <SelectInline />\n      <SelectDisabled />\n      <SelectInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction SelectBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a fruit\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            <SelectItem value=\"grapes\" disabled>\n              Grapes\n            </SelectItem>\n            <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <Select>\n          <SelectTrigger size=\"sm\">\n            <SelectValue\n              placeholder={\n                <>\n                  <IconPlaceholder\n                    lucide=\"ChartLineIcon\"\n                    tabler=\"IconChartLine\"\n                    hugeicons=\"Chart03Icon\"\n                    phosphor=\"ChartLineIcon\"\n                    remixicon=\"RiLineChartLine\"\n                  />\n                  Chart Type\n                </>\n              }\n            />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"line\">\n                <IconPlaceholder\n                  lucide=\"ChartLineIcon\"\n                  tabler=\"IconChartLine\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartBarIcon\"\n                  remixicon=\"RiBarChartLine\"\n                />\n                Line\n              </SelectItem>\n              <SelectItem value=\"bar\">\n                <IconPlaceholder\n                  lucide=\"ChartBarIcon\"\n                  tabler=\"IconChartBar\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartBarIcon\"\n                  remixicon=\"RiBarChartLine\"\n                />\n                Bar\n              </SelectItem>\n              <SelectItem value=\"pie\">\n                <IconPlaceholder\n                  lucide=\"ChartPieIcon\"\n                  tabler=\"IconChartPie\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartPieIcon\"\n                  remixicon=\"RiPieChartLine\"\n                />\n                Pie\n              </SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select>\n          <SelectTrigger size=\"default\">\n            <SelectValue\n              placeholder={\n                <>\n                  <IconPlaceholder\n                    lucide=\"ChartLineIcon\"\n                    tabler=\"IconChartLine\"\n                    hugeicons=\"Chart03Icon\"\n                    phosphor=\"ChartLineIcon\"\n                    remixicon=\"RiLineChartLine\"\n                  />\n                  Chart Type\n                </>\n              }\n            />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"line\">\n                <IconPlaceholder\n                  lucide=\"ChartLineIcon\"\n                  tabler=\"IconChartLine\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartLineIcon\"\n                  remixicon=\"RiLineChartLine\"\n                />\n                Line\n              </SelectItem>\n              <SelectItem value=\"bar\">\n                <IconPlaceholder\n                  lucide=\"ChartBarIcon\"\n                  tabler=\"IconChartBar\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartBarIcon\"\n                  remixicon=\"RiBarChartLine\"\n                />\n                Bar\n              </SelectItem>\n              <SelectItem value=\"pie\">\n                <IconPlaceholder\n                  lucide=\"ChartPieIcon\"\n                  tabler=\"IconChartPie\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartPieIcon\"\n                  remixicon=\"RiPieChartLine\"\n                />\n                Pie\n              </SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithGroups() {\n  return (\n    <Example title=\"With Groups & Labels\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a fruit\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectLabel>Fruits</SelectLabel>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n          </SelectGroup>\n          <SelectSeparator />\n          <SelectGroup>\n            <SelectLabel>Vegetables</SelectLabel>\n            <SelectItem value=\"carrot\">Carrot</SelectItem>\n            <SelectItem value=\"broccoli\">Broccoli</SelectItem>\n            <SelectItem value=\"spinach\">Spinach</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectLargeList() {\n  return (\n    <Example title=\"Large List\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select an item\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {Array.from({ length: 100 }).map((_, i) => (\n              <SelectItem key={i} value={`item-${i}`}>\n                Item {i}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <Select>\n          <SelectTrigger size=\"sm\">\n            <SelectValue placeholder=\"Small size\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select>\n          <SelectTrigger size=\"default\">\n            <SelectValue placeholder=\"Default size\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithButton() {\n  return (\n    <Example title=\"With Button\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Select>\n            <SelectTrigger size=\"sm\">\n              <SelectValue placeholder=\"Small\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\" size=\"sm\">\n            Submit\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Select>\n            <SelectTrigger>\n              <SelectValue placeholder=\"Default\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\">Submit</Button>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectItemAligned() {\n  return (\n    <Example title=\"Popper\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a fruit\" />\n        </SelectTrigger>\n        <SelectContent position=\"popper\">\n          <SelectGroup>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            <SelectItem value=\"grapes\" disabled>\n              Grapes\n            </SelectItem>\n            <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithField() {\n  return (\n    <Example title=\"With Field\">\n      <Field>\n        <FieldLabel htmlFor=\"select-fruit\">Favorite Fruit</FieldLabel>\n        <Select>\n          <SelectTrigger id=\"select-fruit\">\n            <SelectValue placeholder=\"Select a fruit\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              <SelectItem value=\"grapes\">Grapes</SelectItem>\n              <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <FieldDescription>\n          Choose your favorite fruit from the list.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SelectInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Select>\n          <SelectTrigger aria-invalid=\"true\">\n            <SelectValue placeholder=\"Select a fruit\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              <SelectItem value=\"grapes\">Grapes</SelectItem>\n              <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-fruit-invalid\">Favorite Fruit</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-fruit-invalid\" aria-invalid>\n              <SelectValue placeholder=\"Select a fruit\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n                <SelectItem value=\"grapes\">Grapes</SelectItem>\n                <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldError errors={[{ message: \"Please select a valid fruit.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectInline() {\n  return (\n    <Example title=\"Inline with Input & NativeSelect\">\n      <div className=\"flex items-center gap-2\">\n        <Input placeholder=\"Search...\" className=\"flex-1\" />\n        <Select>\n          <SelectTrigger className=\"w-[140px]\">\n            <SelectValue placeholder=\"Filter\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"all\">All</SelectItem>\n              <SelectItem value=\"active\">Active</SelectItem>\n              <SelectItem value=\"inactive\">Inactive</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <NativeSelect className=\"w-[140px]\">\n          <NativeSelectOption value=\"\">Sort by</NativeSelectOption>\n          <NativeSelectOption value=\"name\">Name</NativeSelectOption>\n          <NativeSelectOption value=\"date\">Date</NativeSelectOption>\n          <NativeSelectOption value=\"status\">Status</NativeSelectOption>\n        </NativeSelect>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Select disabled>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Disabled\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            <SelectItem value=\"grapes\" disabled>\n              Grapes\n            </SelectItem>\n            <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nconst plans = [\n  {\n    name: \"Starter\",\n    description: \"Perfect for individuals getting started.\",\n  },\n  {\n    name: \"Professional\",\n    description: \"Ideal for growing teams and businesses.\",\n  },\n  {\n    name: \"Enterprise\",\n    description: \"Advanced features for large organizations.\",\n  },\n]\n\nfunction SelectPlan() {\n  const [plan, setPlan] = React.useState<string>(plans[0].name)\n\n  const selectedPlan = plans.find((p) => p.name === plan)\n\n  return (\n    <Example title=\"Subscription Plan\">\n      <Select value={plan} onValueChange={setPlan}>\n        <SelectTrigger className=\"h-auto! w-72\">\n          <SelectValue>\n            {selectedPlan && <SelectPlanItem plan={selectedPlan} />}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {plans.map((plan) => (\n              <SelectItem key={plan.name} value={plan.name}>\n                <SelectPlanItem plan={plan} />\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectPlanItem({ plan }: { plan: (typeof plans)[number] }) {\n  return (\n    <Item size=\"xs\" className=\"w-full p-0\">\n      <ItemContent className=\"gap-0\">\n        <ItemTitle>{plan.name}</ItemTitle>\n        <ItemDescription className=\"text-xs\">\n          {plan.description}\n        </ItemDescription>\n      </ItemContent>\n    </Item>\n  )\n}\n\nfunction SelectInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Select Example</DialogTitle>\n            <DialogDescription>\n              Use the select below to choose a fruit.\n            </DialogDescription>\n          </DialogHeader>\n          <Select>\n            <SelectTrigger>\n              <SelectValue placeholder=\"Select a fruit\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n                <SelectItem value=\"grapes\">Grapes</SelectItem>\n                <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
      "type": "registry:example"
    }
  ],
  "type": "registry:example"
}