Input

Use Input for a short value such as an email address, password, or name. Choose Textarea for several lines of text.

Preview

Normal, invalid, and disabled inputs

Compare an email field with a placeholder, an explicitly invalid value, and a disabled workspace input.

Invalid

Disabled

Installation

New to this Registry? Complete the base setup before continuing.

npx shadcn@latest add @neumorphism-ui/input

Install the shared base once, then add components and their dependencies with the CLI.

Normal, invalid, and disabled inputs

npx shadcn@latest add @neumorphism-ui/input @neumorphism-ui/label

Registry JSON

Usage

Connect a visible Label with id and htmlFor, then set the native type, name, and autocomplete that fit the task. Associate help or errors with aria-describedby.

"use client";

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

export default function Example() {
  const id = useId();
  return (
    <div className="grid gap-2">
      <Label htmlFor={id}>Email</Label>
      <Input id={id} name="email" type="email" autoComplete="email" placeholder="you@example.com" />
    </div>
  );
}

API Reference

Forwards every native input attribute while consistently styling the neumorphic inset surface, file input, disabled state, and aria-invalid state.

Component	Prop	Type	Default	Description
`Input`	`type`	`React.HTMLInputTypeAttribute`	`"text" (browser default)`	The native input type, such as email, password, or file.
`Input`	`value / defaultValue`	`string \| number`	`—`	The controlled value or initial uncontrolled value.
`Input`	`placeholder`	`string`	`—`	A short example that helps communicate the expected value format.
`Input`	`disabled / required / readOnly`	`boolean`	`false`	Sets native input constraints.
`Input`	`aria-invalid`	`boolean \| string`	`—`	Enables the error border and focus ring.

Preview

Normal, invalid, and disabled inputs

Installation

Usage

API Reference

Accessibility