input-example.json — ui Source File

Source Code

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "input-example",
  "title": "Input",
  "registryDependencies": [
    "button",
    "field",
    "input",
    "native-select",
    "select",
    "example"
  ],
  "files": [
    {
      "path": "registry/base-lyra/examples/input-example.tsx",
      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n  Field,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/base-lyra/ui/field\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/base-lyra/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-lyra/ui/select\"\n\nexport default function InputExample() {\n  return (\n    <ExampleWrapper>\n      <InputBasic />\n      <InputInvalid />\n      <InputWithLabel />\n      <InputWithDescription />\n      <InputDisabled />\n      <InputTypes />\n      <InputWithSelect />\n      <InputWithButton />\n      <InputWithNativeSelect />\n      <InputForm />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Input type=\"email\" placeholder=\"Email\" />\n    </Example>\n  )\n}\n\nfunction InputInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <Input type=\"text\" placeholder=\"Error\" aria-invalid=\"true\" />\n    </Example>\n  )\n}\n\nfunction InputWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <Field>\n        <FieldLabel htmlFor=\"input-demo-email\">Email</FieldLabel>\n        <Input\n          id=\"input-demo-email\"\n          type=\"email\"\n          placeholder=\"name@example.com\"\n        />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputWithDescription() {\n  return (\n    <Example title=\"With Description\">\n      <Field>\n        <FieldLabel htmlFor=\"input-demo-username\">Username</FieldLabel>\n        <Input\n          id=\"input-demo-username\"\n          type=\"text\"\n          placeholder=\"Enter your username\"\n        />\n        <FieldDescription>\n          Choose a unique username for your account.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Field>\n        <FieldLabel htmlFor=\"input-demo-disabled\">Email</FieldLabel>\n        <Input\n          id=\"input-demo-disabled\"\n          type=\"email\"\n          placeholder=\"Email\"\n          disabled\n        />\n      </Field>\n    </Example>\n  )\n}\n\nfunction InputTypes() {\n  return (\n    <Example title=\"Input Types\">\n      <div className=\"flex w-full flex-col gap-6\">\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-password\">Password</FieldLabel>\n          <Input\n            id=\"input-demo-password\"\n            type=\"password\"\n            placeholder=\"Password\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-tel\">Phone</FieldLabel>\n          <Input\n            id=\"input-demo-tel\"\n            type=\"tel\"\n            placeholder=\"+1 (555) 123-4567\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-url\">URL</FieldLabel>\n          <Input\n            id=\"input-demo-url\"\n            type=\"url\"\n            placeholder=\"https://example.com\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-search\">Search</FieldLabel>\n          <Input id=\"input-demo-search\" type=\"search\" placeholder=\"Search\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-number\">Number</FieldLabel>\n          <Input id=\"input-demo-number\" type=\"number\" placeholder=\"123\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-date\">Date</FieldLabel>\n          <Input id=\"input-demo-date\" type=\"date\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-time\">Time</FieldLabel>\n          <Input id=\"input-demo-time\" type=\"time\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-demo-file\">File</FieldLabel>\n          <Input id=\"input-demo-file\" type=\"file\" />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputWithSelect() {\n  return (\n    <Example title=\"With Select\">\n      <div className=\"flex w-full gap-2\">\n        <Input type=\"text\" placeholder=\"Enter amount\" className=\"flex-1\" />\n        <Select defaultValue=\"usd\">\n          <SelectTrigger className=\"w-32\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"usd\">USD</SelectItem>\n              <SelectItem value=\"eur\">EUR</SelectItem>\n              <SelectItem value=\"gbp\">GBP</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputWithButton() {\n  return (\n    <Example title=\"With Button\">\n      <div className=\"flex w-full gap-2\">\n        <Input type=\"search\" placeholder=\"Search...\" className=\"flex-1\" />\n        <Button>Search</Button>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputWithNativeSelect() {\n  return (\n    <Example title=\"With Native Select\">\n      <div className=\"flex w-full gap-2\">\n        <Input type=\"tel\" placeholder=\"(555) 123-4567\" className=\"flex-1\" />\n        <NativeSelect defaultValue=\"+1\">\n          <NativeSelectOption value=\"+1\">+1</NativeSelectOption>\n          <NativeSelectOption value=\"+44\">+44</NativeSelectOption>\n          <NativeSelectOption value=\"+46\">+46</NativeSelectOption>\n        </NativeSelect>\n      </div>\n    </Example>\n  )\n}\n\nfunction InputForm() {\n  return (\n    <Example title=\"Form\">\n      <form className=\"w-full\">\n        <FieldGroup>\n          <Field>\n            <FieldLabel htmlFor=\"form-name\">Name</FieldLabel>\n            <Input id=\"form-name\" type=\"text\" placeholder=\"John Doe\" />\n          </Field>\n          <Field>\n            <FieldLabel htmlFor=\"form-email\">Email</FieldLabel>\n            <Input\n              id=\"form-email\"\n              type=\"email\"\n              placeholder=\"john@example.com\"\n            />\n            <FieldDescription>\n              We&apos;ll never share your email with anyone.\n            </FieldDescription>\n          </Field>\n          <div className=\"grid grid-cols-2 gap-4\">\n            <Field>\n              <FieldLabel htmlFor=\"form-phone\">Phone</FieldLabel>\n              <Input\n                id=\"form-phone\"\n                type=\"tel\"\n                placeholder=\"+1 (555) 123-4567\"\n              />\n            </Field>\n            <Field>\n              <FieldLabel htmlFor=\"form-country\">Country</FieldLabel>\n              <Select defaultValue=\"us\">\n                <SelectTrigger id=\"form-country\">\n                  <SelectValue />\n                </SelectTrigger>\n                <SelectContent>\n                  <SelectGroup>\n                    <SelectItem value=\"us\">United States</SelectItem>\n                    <SelectItem value=\"uk\">United Kingdom</SelectItem>\n                    <SelectItem value=\"ca\">Canada</SelectItem>\n                  </SelectGroup>\n                </SelectContent>\n              </Select>\n            </Field>\n          </div>\n          <Field>\n            <FieldLabel htmlFor=\"form-address\">Address</FieldLabel>\n            <Input id=\"form-address\" type=\"text\" placeholder=\"123 Main St\" />\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Button type=\"button\" variant=\"outline\">\n              Cancel\n            </Button>\n            <Button type=\"submit\">Submit</Button>\n          </Field>\n        </FieldGroup>\n      </form>\n    </Example>\n  )\n}\n",
      "type": "registry:example"
    }
  ],
  "type": "registry:example"
}