Ô nhập

import {
  Field,
  FieldDescription,

Input nhận vào một dòng văn bản — tên, email, truy vấn tìm kiếm. Được xây dựng trên thành phần Base UI Input, một lớp bọc mỏng quanh thẻ <input> native, và khoác lên công thức neobrutalist: viền dày, bóng đổ đậm và đường viền focus tương phản cao.

Nên dùng khi:

• Biểu mẫu đăng nhập và đăng ký — các ô email, tên đăng nhập và mật khẩu đi cùng Field và FieldLabel.
• Thanh tìm kiếm — đặt cạnh một Button, hoặc kèm biểu tượng thông qua InputGroup.
• Trang thanh toán và cài đặt — địa chỉ, số thẻ và các ô thông tin cá nhân bố trí trong một FieldGroup.

Cài đặt#

pnpmnpmyarnbun
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
Sao chép

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 }

Cách dùng#

Sao chépimport { Input } from "@/components/ui/input"

Sao chép<Input />

Ví dụ#

Cơ bản#

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

export function InputBasic() {

Field#

Dùng Field, FieldLabel và FieldDescription để tạo một input có nhãn và mô tả.

import {
  Field,
  FieldDescription,

Field Group#

Dùng FieldGroup để hiển thị nhiều khối Field và xây dựng biểu mẫu.

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

Vô hiệu hóa#

Dùng prop disabled để vô hiệu hóa input. Để tạo kiểu cho trạng thái vô hiệu hóa, hãy thêm thuộc tính data-disabled vào component Field.

import {
  Field,
  FieldDescription,

Không hợp lệ#

Dùng prop aria-invalid để đánh dấu input là không hợp lệ. Để tạo kiểu cho trạng thái không hợp lệ, hãy thêm thuộc tính data-invalid vào component Field.

import {
  Field,
  FieldDescription,

Tệp#

Dùng prop type="file" để tạo một input chọn tệp.

import {
  Field,
  FieldDescription,

Nội tuyến#

Dùng Field với orientation="horizontal" để tạo một input nội tuyến. Kết hợp với Button để tạo một input tìm kiếm có nút.

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

Lưới#

Dùng bố cục lưới để đặt nhiều input cạnh nhau.

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

Bắt buộc#

Dùng thuộc tính required để chỉ định các input bắt buộc.

import {
  Field,
  FieldDescription,

Badge#

Dùng Badge trong nhãn để làm nổi bật một trường được khuyến nghị.

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

Input Group#

Để thêm biểu tượng, văn bản hoặc nút vào bên trong một input, hãy dùng component InputGroup. Xem component Input Group để biết thêm ví dụ.

import { InfoIcon } from "lucide-react"

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

Button Group#

Để thêm nút vào một input, hãy dùng component ButtonGroup. Xem component Button Group để biết thêm ví dụ.

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

Biểu mẫu#

Một ví dụ biểu mẫu đầy đủ với nhiều input, một select và một nút.

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

RTL#

Để bật hỗ trợ RTL trong Neobrutalism, hãy xem hướng dẫn cấu hình RTL.

"use client"

import * as React from "react"

Khả năng truy cập#

Input render một thẻ <input> native, nên việc nhập bằng bàn phím, focus và gửi form không cần đến ARIA. Phần còn lại thuộc về bạn:

• Gắn nhãn cho mọi input. Ghép nó với FieldLabel (hoặc một <label htmlFor>) — placeholder không phải là nhãn; nó biến mất khi người dùng gõ và không được đọc lên một cách đáng tin cậy.
• Liên kết văn bản lỗi. Đặt aria-invalid lên input và trỏ aria-describedby tới id của FieldError hay FieldDescription để trình đọc màn hình đọc thông báo cùng với ô nhập.
• Chọn đúng type và autocomplete. type="email" cùng autocomplete="email" sẽ cho đúng bàn phím trên mobile và bật tự động điền.