Input

A single-line text input.

stable

Preview

Code

tsx

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

export function Example() {
  return (
    <div className="w-full max-w-sm space-y-3">
      <Input placeholder="Email address" type="email" />
      <Input placeholder="Disabled" disabled />
    </div>
  );
}

Props

Prop	Type	Default	Description
type	`"text" \| "email" \| "password" \| "number" \| "search" \| "tel" \| "url" \| "..."`	"text"	Native input type. All standard HTML input types are supported.
disabled	`boolean`	false	Disables interaction and dims the input.
className	`string`	—	Additional Tailwind classes, merged with the component's defaults via `cn()`.

Spreads all `<input>` props. Forwards `ref` to the input element.

All components also accept standard HTML attributes for their root element (e.g. `id`, `aria-*`, `data-*`, event handlers) and forward `ref` where applicable.

Source

The full implementation of components/ui/input.tsx is below — copy it into your project and own it. Some components import the cn helper from lib/utils or other primitives; copy those too.

tsx

import { cn } from "@/lib/utils";
import { type InputHTMLAttributes, forwardRef } from "react";

export type InputProps = InputHTMLAttributes<HTMLInputElement>;

export const Input = forwardRef<HTMLInputElement, InputProps>(
  ({ className, type, ...props }, ref) => (
    <input
      ref={ref}
      type={type}
      className={cn(
        "flex h-9 w-full rounded-md border border-border bg-surface px-3 py-1 text-sm shadow-sm",
        "placeholder:text-fg-subtle",
        "focus-visible:outline-1 focus-visible:outline-offset-0 focus-visible:outline-accent",
        "disabled:cursor-not-allowed disabled:opacity-50",
        "file:border-0 file:bg-transparent file:text-sm file:font-medium",
        className,
      )}
      {...props}
    />
  ),
);
Input.displayName = "Input";

JavaFX

Ships in the PRIZM JavaFX library for thick-client C3 apps as PrizmInput (extends TextField). Run the gallery to see it natively.

java

import design.prizm.fx.controls.PrizmInput;

PrizmInput()
PrizmInput(String text)
PrizmInput(String text, String promptText)

Prop	Type	Default	Description
promptText	`StringProperty`	—	Placeholder shown when empty (inherited from TextField; styled via -fx-prompt-text-fill).
disabled	`BooleanProperty`	false	Inherited from Node; dims the field via the :disabled pseudo-class.

Thin subclass of TextField; styling comes from the .text-field rules in prizm.css. For obscured entry use a PasswordField equivalent (not in this slice). Mirrors components/ui/input.tsx.