Input

用于电子邮箱、密码、姓名等简短值的输入。多行文字使用 Textarea。

预览

普通、无效与禁用输入

比较带示例提示的邮箱字段、明确的无效值和禁用的工作区输入。

电子邮箱

错误状态

已禁用

安装

首次使用此 Registry？请先完成基础配置与共享样式安装。

npx shadcn@latest add @neumorphism-ui/input

先安装一次共享 base，然后使用 CLI 添加组件及其依赖。

普通、无效与禁用输入

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

Registry JSON

用法

通过 id 和 htmlFor 关联可见标签，并设置合适的 type、name 和 autoComplete。帮助与错误信息通过 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 参考

透传原生 input 的全部属性，并统一呈现拟物 inset 表面、file input、disabled 和 aria-invalid 状态。

组件	属性	类型	默认值	说明
`Input`	`type`	`React.HTMLInputTypeAttribute`	`"text" (browser default)`	email、password、file 等原生 input 类型。
`Input`	`value / defaultValue`	`string \| number`	`—`	受控值或非受控初始值。
`Input`	`placeholder`	`string`	`—`	用于提示输入格式的简短示例。
`Input`	`disabled / required / readOnly`	`boolean`	`false`	设置原生输入限制。
`Input`	`aria-invalid`	`boolean \| string`	`—`	启用错误状态边框和 focus ring。

预览

普通、无效与禁用输入

安装

用法

API 参考

无障碍