input examples -> default, label, error

Author: ariflogs

config/components.ts

@@ -49,6 +49,10 @@ export const componentConfig: {
       name: "dialog",
       filePath: "packages/ui/Dialog/Dialog.tsx",
     },
+    input: {
+      name: "input",
+      filePath: "packages/ui/Input.tsx",
+    },
     menu: {
       name: "menu",
       filePath: "packages/ui/Menu/Menu.tsx",
@@ -200,6 +204,18 @@ export const componentConfig: {
       filePath: "preview/components/input-style-default.tsx",
       preview: lazy(() => import("@/preview/components/input-style-default")),
     },
+    "input-style-with-label": {
+      name: "input-style-with-label",
+      filePath: "preview/components/input-style-with-label.tsx",
+      preview: lazy(
+        () => import("@/preview/components/input-style-with-label")
+      ),
+    },
+    "input-style-error": {
+      name: "input-style-error",
+      filePath: "preview/components/input-style-error.tsx",
+      preview: lazy(() => import("@/preview/components/input-style-error")),
+    },
     "menu-style-default": {
       name: "menu-style-default",
       filePath: "preview/components/menu-style-default.tsx",

content/docs/components/input.mdx

@@ -1,11 +1,36 @@
 ---
 title: Input
 description: This pretty input makes your users want to type stuff! ⌨️
-lastUpdated: 08 Oct, 2024
+lastUpdated: 04 Mar, 2024
 ---
 
-### Default
+<ComponentShowcase name="input-style-default" />
+<br />
+<br />
+
+## Installation
 
-<hr />
+#### 1. Copy the code 👇 into your project:
+
+<ComponentSource name="input" />
+<br />
 <br />
+
+## Examples
+
+### Default
+
 <ComponentShowcase name="input-style-default" />
+<br />
+<br />
+
+### With label
+
+<ComponentShowcase name="input-style-with-label" />
+<br />
+<br />
+
+### Error
+
+<ComponentShowcase name="input-style-error" />
+<br />

package.json

@@ -15,6 +15,7 @@
     "@radix-ui/react-checkbox": "^1.1.4",
     "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
+    "@radix-ui/react-label": "^2.1.2",
     "@radix-ui/react-radio-group": "^1.2.3",
     "@radix-ui/react-select": "^2.1.6",
     "@radix-ui/react-switch": "^1.1.3",

packages/ui/Form/index.tsx

@@ -1,4 +1,3 @@
-export * from "./Input";
 export * from "./Textarea";
 export * from "./Checkbox";
 export * from "./Radio";

packages/ui/Form/Input.tsx renamed to packages/ui/Input.tsx

@@ -10,11 +10,16 @@ export const Input: React.FC<InputProps> = ({
   className = "",
   ...props
 }) => {
+  console.log(props);
   return (
     <input
       type={type}
       placeholder={placeholder}
-      className={`px-4 py-2 w-full border-2 border-black shadow-md transition focus:outline-none focus:shadow-xs ${className}`}
+      className={`px-4 py-2 w-full border-2 border-black shadow-md transition focus:outline-none focus:shadow-xs ${
+        props["aria-invalid"]
+          ? "border-red-500 text-red-500 shadow-xs shadow-red-600"
+          : ""
+      } ${className}`}
       {...props}
     />
   );

packages/ui/Label.tsx

@@ -0,0 +1,18 @@
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const labelVariants = cva(
+  "leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+);
+
+const Label = ({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) => (
+  <LabelPrimitive.Root className={cn(labelVariants(), className)} {...props} />
+);
+
+export { Label };

packages/ui/index.ts

@@ -9,3 +9,5 @@ export * from "./Badges";
 export * from "./Tabs";
 export * from "./Dialog";
 export * from "./Menu";
+export * from "./Input";
+export * from "./Label";

pnpm-lock.yaml

@@ -0,0 +1,17 @@
+import { Input, Label } from "@/packages/ui";
+
+export default function InputStyleError() {
+  return (
+    <div className="grid w-full max-w-sm items-center gap-1.5">
+      <Label htmlFor="pokemon">Favorite Pokemon</Label>
+      <Input
+        type="pokemon"
+        id="pokemon"
+        placeholder="Charmander"
+        defaultValue="Son Goku"
+        aria-invalid
+      />
+      <p className="text-sm text-red-500">Please provide a valid pokemon!</p>
+    </div>
+  );
+}

preview/components/input-style-error.tsx

@@ -0,0 +1,10 @@
+import { Input, Label } from "@/packages/ui";
+
+export default function InputStyleWithLabel() {
+  return (
+    <div className="grid w-full max-w-sm items-center gap-1.5">
+      <Label htmlFor="pokemon">Favorite Pokemon</Label>
+      <Input type="pokemon" id="pokemon" placeholder="Charmander" />
+    </div>
+  );
+}