Text Input

Single-line text field for forms, already themed for light and dark. Pair with the Field and FieldLabel primitives for consistent spacing instead of wrapping it by hand.

MIT · shadcn inputreact-tailwind

Get a site with blocks like this

Live preview

open in new tab ↗

import * as React from "react"
import { cn } from "@/lib/utils"

function Input({ className, type, ...props }) {
  return (
    <input
      type={type}
      data-slot="input"
      className={cn(
        "h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs outline-none placeholder:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 md:text-sm focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
        className
      )}
      {...props}
    />
  )
}

export { Input }

Block id: shadcn-inputreact-tailwind · drop-in

More input blocks

Want the whole site, not just the block?

We ship real client sites in 3 weeks — with blocks like this one, wired to your brand.

Get my free 15-min audit Book a Discovery Call