表单与选择@neumorphism-ui/input

Input

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

@neumorphism-ui/input

Registry JSON

预览

电子邮箱

错误状态

已禁用

安装

npx shadcn@latest add @neumorphism-ui/input

CLI 会依次处理 npm 依赖、base token、utils 和组件源码。

首次使用此 Registry？请先完成 namespace 配置。

用法

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

Import

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

Example

<div className="grid gap-2">
  <Label htmlFor="email">电子邮箱</Label>
  <Input
    id="email"
    name="email"
    type="email"
    placeholder="you@example.com"
    autoComplete="email"
  />
</div>

API 参考

组件	属性	类型	默认值	说明
`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。

预览

安装

用法

Import

Example

API 参考

无障碍