输入框

用于登录、搜索栏和结账表单的单行文本输入框——采用新粗野主义风格的粗边框和硬阴影效果。

import {
  Field,
  FieldDescription,

输入框用于采集单行文本——姓名、邮箱、搜索词。它基于 Base UI Input 组件构建，是原生 <input> 的薄封装，并套上新粗野主义配方：粗边框、硬阴影，以及高对比度的焦点轮廓。

适合以下场景：

登录与注册表单——邮箱、用户名、密码字段，搭配 Field 与 FieldLabel。
搜索栏——与 Button 并排，或通过 InputGroup 加图标。
结算与设置页——地址、卡号、资料字段，排布在 FieldGroup 中。

安装


pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/input.json
npx shadcn@latest add https://neobrutalism.com/r/base/input.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/input.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/input.json

将以下代码复制并粘贴到您的项目中。

components/ui/input.tsx

import * as React from "react"

import { cn } from "@/lib/utils"

function Input({ className, type, ...props }: React.ComponentProps<"input">) {
  return (
    <input
      type={type}
      data-slot="input"
      className={cn(
        "h-8 w-full min-w-0 rounded border-2 bg-input px-3 py-2 text-sm shadow-sm transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive",
        className
      )}
      {...props}
    />
  )
}

export { Input }

更新导入路径以匹配您的项目结构。

用法

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

<Input />

示例

基础

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

export function InputBasic() {

Field

使用 Field、FieldLabel 和 FieldDescription 创建带标签和描述的输入。

import {
  Field,
  FieldDescription,

Field Group

使用 FieldGroup 显示多个 Field 块并构建表单。

import { Button } from "@/components/ui/button"
import {
  Field,

禁用

使用 disabled 属性禁用输入。若要为禁用状态设置样式，请在 Field 组件上添加 data-disabled 属性。

import {
  Field,
  FieldDescription,

无效

使用 aria-invalid 属性将输入标记为无效。若要为无效状态设置样式，请在 Field 组件上添加 data-invalid 属性。

import {
  Field,
  FieldDescription,

文件

使用 type="file" 属性创建文件输入。

import {
  Field,
  FieldDescription,

内联

为 Field 指定 orientation="horizontal" 以创建内联输入。搭配 Button 可创建带按钮的搜索输入。

import { Button } from "@/components/ui/button"
import { Field } from "@/components/ui/field"
import { Input } from "@/components/ui/input"

网格

使用网格布局将多个输入并排放置。

import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"

必填

使用 required 属性标示必填的输入。

import {
  Field,
  FieldDescription,

Badge

在标签中使用 Badge 来突出推荐填写的字段。

import { Badge } from "@/components/ui/badge"
import { Field, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"

Input Group

若要在输入内部添加图标、文本或按钮，请使用 InputGroup 组件。更多示例请参阅 Input Group 组件。

import { InfoIcon } from "lucide-react"

import { Field, FieldLabel } from "@/components/ui/field"

Button Group

若要为输入添加按钮，请使用 ButtonGroup 组件。更多示例请参阅 Button Group 组件。

import { Button } from "@/components/ui/button"
import { ButtonGroup } from "@/components/ui/button-group"
import { Field, FieldLabel } from "@/components/ui/field"

表单

一个包含多个输入、一个选择框和一个按钮的完整表单示例。

import { Button } from "@/components/ui/button"
import {
  Field,

RTL

若要在 Neobrutalism 中启用 RTL 支持，请参阅 RTL 配置指南。

"use client"

import * as React from "react"

无障碍

Input 渲染原生 <input>，因此键盘编辑、焦点与表单提交无需额外 ARIA 接线。剩下的交给您：

为每个输入加标签。 与 FieldLabel（或 <label htmlFor>）配对——placeholder 不是标签；输入时它会消失，也无法被可靠播报。
关联错误文案。 在输入上设置 aria-invalid，并用 aria-describedby 指向 FieldError 或 FieldDescription 的 id，让屏幕阅读器连同字段一起读出消息。
选对 type 与 autocomplete。 例如 type="email" 加上 autocomplete="email"，可得到正确的移动键盘与自动填充。