Input

Installation

pnpm dlx shadcn@latest add https://prototyper-ui.com/r/input.json

npx shadcn@latest add https://prototyper-ui.com/r/input.json

yarn dlx shadcn@latest add https://prototyper-ui.com/r/input.json

bunx --bun shadcn@latest add https://prototyper-ui.com/r/input.json

This will add the following files to your project:

components/ui/input.tsx

Usage

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

<Input type="email" placeholder="Email" />

Styling

Data Slots

Use data-slot attributes to target the input in CSS:

Slot name	Element
`input`	The `<input>` root

Customization Examples

/* Make all inputs taller */
[data-slot="input"] {
  @apply h-12 text-lg;
}

{/* Override styles via className */}
<Input className="rounded-full px-5" placeholder="Pill input" />

API Reference

A styled text input built on Base UI Input.

Prop

Type

All native input props and Base UI Input props are forwarded via ...props.

Accessibility

Keyboard Interactions

Key	Action
`Tab`	Moves focus into or out of the input

ARIA Attributes

Renders as a native <input> element via Base UI Input.
aria-invalid styling is applied when the input has validation errors.
Pair with a <label> or aria-label to ensure the input is accessible to screen readers.

Stream UI

This component is available in @prototyperai/stream-ui.

Catalog Definition

input.catalog.ts

import { z } from "zod"
import { defineComponent } from "@prototyperai/stream-ui/catalog"

export default defineComponent({
  description: "A text input field for user data entry",
  props: z.object({
    label: z.string().optional().describe("Label displayed above the input"),
    name: z.string().optional().describe("Field name for form submission"),
    placeholder: z.string().optional().describe("Placeholder text"),
    type: z
      .enum(["text", "email", "password", "number", "search", "tel", "url"])
      .optional()
      .describe("Input type"),
    disabled: z.boolean().optional().describe("Whether the input is disabled"),
    readOnly: z.boolean().optional().describe("Whether the input is read-only"),
    value: z.string().optional().describe("Controlled input value"),
  }),
  events: ["change", "focus", "blur", "submit"],
  example: { label: "Name", placeholder: "Enter your name...", type: "text" },
})

Example Spec

{
  "root": "nameInput",
  "elements": {
    "nameInput": {
      "type": "Input",
      "props": {
        "label": "Name",
        "placeholder": "Enter your name...",
        "type": "text"
      },
      "$bindState": { "path": "/name", "event": "change" }
    }
  }
}

Learn more in the Stream UI documentation.

Related Components

Input Groupused by

A composable input group with addons, buttons, and text built on Base UI.

Input

Related Components

On this page