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/base-lyra/examples/select-example.tsx",
      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-lyra/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/base-lyra/ui/field\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-lyra/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/base-lyra/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-lyra/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SelectExample() {\n  return (\n    <ExampleWrapper>\n      <SelectBasic />\n      <SelectSides />\n      <SelectWithIcons />\n      <SelectWithGroups />\n      <SelectLargeList />\n      <SelectMultiple />\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  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Basic\">\n      <Select items={items}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectSides() {\n  const items = [\n    { label: \"Select\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  return (\n    <Example title=\"Sides\" containerClassName=\"col-span-2\">\n      <div className=\"flex flex-wrap justify-center gap-2\">\n        {(\n          [\n            \"inline-start\",\n            \"left\",\n            \"top\",\n            \"bottom\",\n            \"right\",\n            \"inline-end\",\n          ] as const\n        ).map((side) => (\n          <Select key={side} items={items}>\n            <SelectTrigger className=\"w-28 capitalize\">\n              <SelectValue placeholder={side.replace(\"-\", \" \")} />\n            </SelectTrigger>\n            <SelectContent side={side} alignItemWithTrigger={false}>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithIcons() {\n  const items = [\n    {\n      label: (\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      value: null,\n    },\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartLineIcon\"\n            remixicon=\"RiLineChartLine\"\n          />\n          Line\n        </>\n      ),\n      value: \"line\",\n    },\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartBarIcon\"\n            tabler=\"IconChartBar\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartBarIcon\"\n            remixicon=\"RiBarChartLine\"\n          />\n          Bar\n        </>\n      ),\n      value: \"bar\",\n    },\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartPieIcon\"\n            tabler=\"IconChartPie\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartPieIcon\"\n            remixicon=\"RiPieChartLine\"\n          />\n          Pie\n        </>\n      ),\n      value: \"pie\",\n    },\n  ]\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <Select items={items}>\n          <SelectTrigger size=\"sm\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select items={items}>\n          <SelectTrigger size=\"default\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithGroups() {\n  const fruits = [\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  const vegetables = [\n    { label: \"Carrot\", value: \"carrot\" },\n    { label: \"Broccoli\", value: \"broccoli\" },\n    { label: \"Spinach\", value: \"spinach\" },\n  ]\n  const allItems = [\n    { label: \"Select a fruit\", value: null },\n    ...fruits,\n    ...vegetables,\n  ]\n  return (\n    <Example title=\"With Groups & Labels\">\n      <Select items={allItems}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectLabel>Fruits</SelectLabel>\n            {fruits.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n          <SelectSeparator />\n          <SelectGroup>\n            <SelectLabel>Vegetables</SelectLabel>\n            {vegetables.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectLargeList() {\n  const items = [\n    { label: \"Select an item\", value: null },\n    ...Array.from({ length: 100 }).map((_, i) => ({\n      label: `Item ${i}`,\n      value: `item-${i}`,\n    })),\n  ]\n  return (\n    <Example title=\"Large List\">\n      <Select items={items}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectSizes() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <Select items={items}>\n          <SelectTrigger size=\"sm\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select items={items}>\n          <SelectTrigger size=\"default\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithButton() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\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 items={items}>\n            <SelectTrigger size=\"sm\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\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 items={items}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\">Submit</Button>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectItemAligned() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\", disabled: true },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Item Aligned\">\n      <Select items={items}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent alignItemWithTrigger={true}>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem\n                key={item.value}\n                value={item.value}\n                disabled={item.disabled}\n              >\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithField() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"With Field\">\n      <Field>\n        <FieldLabel htmlFor=\"select-fruit\">Favorite Fruit</FieldLabel>\n        <Select items={items}>\n          <SelectTrigger id=\"select-fruit\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\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  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Select items={items}>\n          <SelectTrigger aria-invalid=\"true\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-fruit-invalid\">Favorite Fruit</FieldLabel>\n          <Select items={items}>\n            <SelectTrigger id=\"select-fruit-invalid\" aria-invalid>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\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  const items = [\n    { label: \"Filter\", value: null },\n    { label: \"All\", value: \"all\" },\n    { label: \"Active\", value: \"active\" },\n    { label: \"Inactive\", value: \"inactive\" },\n  ]\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 items={items}>\n          <SelectTrigger className=\"w-[140px]\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\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  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\", disabled: true },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Disabled\">\n      <Select items={items} disabled>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem\n                key={item.value}\n                value={item.value}\n                disabled={item.disabled}\n              >\n                {item.label}\n              </SelectItem>\n            ))}\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  return (\n    <Example title=\"Subscription Plan\">\n      <Select\n        defaultValue={plans[0]}\n        itemToStringValue={(plan: (typeof plans)[number]) => plan.name}\n      >\n        <SelectTrigger className=\"h-auto! w-72\">\n          <SelectValue>\n            {(value: (typeof plans)[number]) => <SelectPlanItem plan={value} />}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {plans.map((plan) => (\n              <SelectItem key={plan.name} value={plan}>\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 SelectMultiple() {\n  const items = [\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n    { label: \"Strawberry\", value: \"strawberry\" },\n    { label: \"Watermelon\", value: \"watermelon\" },\n  ]\n  return (\n    <Example title=\"Multiple Selection\">\n      <Select items={items} multiple defaultValue={[]}>\n        <SelectTrigger className=\"w-72\">\n          <SelectValue>\n            {(value: string[]) => {\n              if (value.length === 0) {\n                return \"Select fruits\"\n              }\n              if (value.length === 1) {\n                return items.find((item) => item.value === value[0])?.label\n              }\n              return `${value.length} fruits selected`\n            }}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectInDialog() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\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 items={items}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
      "type": "registry:example"
    }
  ],
  "type": "registry:example"
}