Components / Primitives

Input

A single-line text field whose border and soft ring ease in on focus.

pnpm exec shadcn add @intelligo/input

Inside an app made by intelligo create, or any shadcn project that names the registry.

built on

Nothing else from the registry.

npm packages it adds

@base-ui/react

used by these pages

Team Settings, Workspace Settings, Auth: Login, Auth: Signup, Auth: Password Reset, Auth: Email Verification, Profile Settings, Onboarding, Chat

more in primitives

Alert dialog, Button, Dialog, Dropdown menu, Popover, Progress, Select, Sheet, Sidebar, Tabs, Textarea, Tooltip, Checkbox, Radio group, Switch, Collapsible, Command

Source

What shadcn add writes to components/ui/input.tsx. It is yours from then on.

/*
 * The input: a card-toned field whose border and soft ring ease in on
 * focus.
 */

import * as React from "react";
import { Input as InputPrimitive } from "@base-ui/react/input";

import { cn } from "@showcase/lib/utils";

function Input({ className, type, ...props }: React.ComponentProps<"input">) {
  return (
    <InputPrimitive
      type={type}
      data-slot="input"
      className={cn(
        "h-8 w-full min-w-0 rounded-lg border border-input bg-card px-2.5 py-1 text-base transition-[border-color,box-shadow,background-color] duration-normal ease-standard outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground hover:border-ring/50 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/20 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm",
        className
      )}
      {...props}
    />
  );
}

export { Input };

Ready to try it? Three commands and the app runs against a stub model.

GitHubDocsGet started