native-select-example.json — ui Source File

Source Code

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "native-select-example",
  "title": "Native Select",
  "registryDependencies": [
    "field",
    "native-select",
    "example"
  ],
  "files": [
    {
      "path": "registry/radix-lyra/examples/native-select-example.tsx",
      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport {\n  Field,\n  FieldDescription,\n  FieldLabel,\n} from \"@/registry/radix-lyra/ui/field\"\nimport {\n  NativeSelect,\n  NativeSelectOptGroup,\n  NativeSelectOption,\n} from \"@/registry/radix-lyra/ui/native-select\"\n\nexport default function NativeSelectExample() {\n  return (\n    <ExampleWrapper>\n      <NativeSelectBasic />\n      <NativeSelectWithGroups />\n      <NativeSelectSizes />\n      <NativeSelectWithField />\n      <NativeSelectDisabled />\n      <NativeSelectInvalid />\n    </ExampleWrapper>\n  )\n}\n\nfunction NativeSelectBasic() {\n  return (\n    <Example title=\"Basic\">\n      <NativeSelect>\n        <NativeSelectOption value=\"\">Select a fruit</NativeSelectOption>\n        <NativeSelectOption value=\"apple\">Apple</NativeSelectOption>\n        <NativeSelectOption value=\"banana\">Banana</NativeSelectOption>\n        <NativeSelectOption value=\"blueberry\">Blueberry</NativeSelectOption>\n        <NativeSelectOption value=\"grapes\" disabled>\n          Grapes\n        </NativeSelectOption>\n        <NativeSelectOption value=\"pineapple\">Pineapple</NativeSelectOption>\n      </NativeSelect>\n    </Example>\n  )\n}\n\nfunction NativeSelectWithGroups() {\n  return (\n    <Example title=\"With Groups\">\n      <NativeSelect>\n        <NativeSelectOption value=\"\">Select a food</NativeSelectOption>\n        <NativeSelectOptGroup label=\"Fruits\">\n          <NativeSelectOption value=\"apple\">Apple</NativeSelectOption>\n          <NativeSelectOption value=\"banana\">Banana</NativeSelectOption>\n          <NativeSelectOption value=\"blueberry\">Blueberry</NativeSelectOption>\n        </NativeSelectOptGroup>\n        <NativeSelectOptGroup label=\"Vegetables\">\n          <NativeSelectOption value=\"carrot\">Carrot</NativeSelectOption>\n          <NativeSelectOption value=\"broccoli\">Broccoli</NativeSelectOption>\n          <NativeSelectOption value=\"spinach\">Spinach</NativeSelectOption>\n        </NativeSelectOptGroup>\n      </NativeSelect>\n    </Example>\n  )\n}\n\nfunction NativeSelectSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <NativeSelect size=\"sm\">\n          <NativeSelectOption value=\"\">Select a fruit</NativeSelectOption>\n          <NativeSelectOption value=\"apple\">Apple</NativeSelectOption>\n          <NativeSelectOption value=\"banana\">Banana</NativeSelectOption>\n          <NativeSelectOption value=\"blueberry\">Blueberry</NativeSelectOption>\n        </NativeSelect>\n        <NativeSelect size=\"default\">\n          <NativeSelectOption value=\"\">Select a fruit</NativeSelectOption>\n          <NativeSelectOption value=\"apple\">Apple</NativeSelectOption>\n          <NativeSelectOption value=\"banana\">Banana</NativeSelectOption>\n          <NativeSelectOption value=\"blueberry\">Blueberry</NativeSelectOption>\n        </NativeSelect>\n      </div>\n    </Example>\n  )\n}\n\nfunction NativeSelectWithField() {\n  return (\n    <Example title=\"With Field\">\n      <Field>\n        <FieldLabel htmlFor=\"native-select-country\">Country</FieldLabel>\n        <NativeSelect id=\"native-select-country\">\n          <NativeSelectOption value=\"\">Select a country</NativeSelectOption>\n          <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n          <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n          <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n          <NativeSelectOption value=\"au\">Australia</NativeSelectOption>\n        </NativeSelect>\n        <FieldDescription>Select your country of residence.</FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction NativeSelectDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <NativeSelect disabled>\n        <NativeSelectOption value=\"\">Disabled</NativeSelectOption>\n        <NativeSelectOption value=\"apple\">Apple</NativeSelectOption>\n        <NativeSelectOption value=\"banana\">Banana</NativeSelectOption>\n        <NativeSelectOption value=\"blueberry\">Blueberry</NativeSelectOption>\n      </NativeSelect>\n    </Example>\n  )\n}\n\nfunction NativeSelectInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <NativeSelect aria-invalid=\"true\">\n        <NativeSelectOption value=\"\">Error state</NativeSelectOption>\n        <NativeSelectOption value=\"apple\">Apple</NativeSelectOption>\n        <NativeSelectOption value=\"banana\">Banana</NativeSelectOption>\n        <NativeSelectOption value=\"blueberry\">Blueberry</NativeSelectOption>\n      </NativeSelect>\n    </Example>\n  )\n}\n",
      "type": "registry:example"
    }
  ],
  "type": "registry:example"
}