Input.

import { Input } from "@/components/ui/input";

export default function InputDemo() {
  return <Input className="max-w-sm" placeholder="hub://your-little-world/" />;
}

Installation#

With the CLI

$npx lanterncn add input

This also installs the Lantern theme and any Lantern UI components it depends on. The shadcn CLI works directly too: npx shadcn@latest add httptim/lantern-ui/input. See Installation if your project is not set up yet.

Manually

1. Copy the source into your project

   components/ui/input.tsx

   import * as React from "react";
   
   import { cn } from "@/lib/utils";
   
   function Input({ className, type, ...props }: React.ComponentProps<"input">) {
     return (
       <input
         type={type}
         data-slot="input"
         className={cn(
           "flex h-10 w-full min-w-0 rounded-md border border-input bg-background/40 px-3 py-2 text-sm text-foreground transition-[border-color,box-shadow] outline-none placeholder:text-muted-foreground/70 selection:bg-primary selection:text-primary-foreground",
           "file:mr-3 file:inline-flex file:h-7 file:cursor-pointer file:rounded-sm file:border-0 file:bg-secondary file:px-2 file:font-mono file:text-[11px] file:text-foreground",
           "hover:border-muted-foreground/60 focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-ring/25",
           "aria-invalid:border-destructive aria-invalid:ring-destructive/20 disabled:cursor-not-allowed disabled:opacity-50",
           className,
         )}
         {...props}
       />
     );
   }
   
   export { Input };

2. Update the import paths to match your project

   The source imports cn from @/lib/utils.

Usage#

import { Input } from "@/components/ui/input";

<Input type="email" placeholder="you@example.com" />

Examples#

import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

export default function InputTypes() {
  return (
    <div className="grid w-full max-w-sm gap-5">
      <div className="grid gap-2">
        <Label htmlFor="in-email">Email</Label>
        <Input id="in-email" type="email" placeholder="you@example.com" />
      </div>
      <div className="grid gap-2">
        <Label htmlFor="in-pass">Password</Label>
        <Input id="in-pass" type="password" defaultValue="lantern" />
      </div>
      <div className="grid gap-2">
        <Label htmlFor="in-file">Site bundle</Label>
        <Input id="in-file" type="file" />
      </div>
      <div className="grid gap-2">
        <Label htmlFor="in-invalid">Site name</Label>
        <Input id="in-invalid" aria-invalid defaultValue="my site!" />
        <p className="text-xs text-destructive">Use lowercase letters, numbers and dashes.</p>
      </div>
      <div className="grid gap-2">
        <Label htmlFor="in-disabled">Computer ID</Label>
        <Input id="in-disabled" disabled defaultValue="81" />
      </div>
    </div>
  );
}