ورودی

import {
  Field,
  FieldDescription,

Input یک خط متن می‌گیرد — نام، ایمیل، query جستجو. بر پایهٔ Base UI Input — یک wrapper نازک روی <input> بومی — ساخته شده و با دستور پخت نئوبروتالیستی پوشیده شده: حاشیهٔ ضخیم، سایهٔ سخت و outline فوکوس با کنتراست بالا.

برای این موارد از آن استفاده کنید:

• فرم auth و ثبت‌نام — فیلدهای ایمیل، نام کاربری و رمز جفت‌شده با Field و FieldLabel.
• نوار جستجو — هم‌خط با Button، یا با آیکون از طریق InputGroup.
• صفحات checkout و تنظیمات — آدرس، شماره کارت و فیلد پروفایل در یک FieldGroup.

نصب#

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
کپی

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#

برای نمایش چند بلوک Field و ساخت فرم‌ها، از FieldGroup استفاده کنید.

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

غیرفعال#

برای غیرفعال کردن ورودی، از ویژگی disabled استفاده کنید. برای استایل‌دهی به حالت غیرفعال، صفت data-disabled را به کامپوننت Field اضافه کنید.

import {
  Field,
  FieldDescription,

نامعتبر#

برای علامت‌گذاری ورودی به‌عنوان نامعتبر، از ویژگی aria-invalid استفاده کنید. برای استایل‌دهی به حالت نامعتبر، صفت data-invalid را به کامپوننت Field اضافه کنید.

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"

فرم#

یک نمونهٔ فرم کامل با چند ورودی، یک select و یک دکمه.

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

RTL#

برای فعال‌سازی پشتیبانی RTL در Neobrutalism، راهنمای پیکربندی RTL را ببینید.

"use client"

import * as React from "react"

دسترسی‌پذیری#

Input یک <input> بومی رندر می‌کند، پس ویرایش صفحه‌کلید، فوکوس و submit فرم به سیم‌کشی ARIA نیاز ندارد. بقیه با شماست:

• هر input را برچسب بزنید. با FieldLabel (یا <label htmlFor>) جفتش کنید — placeholder برچسب نیست؛ با تایپ ناپدید می‌شود و قابل‌اعتماد اعلام نمی‌شود.
• متن خطا را مرتبط کنید. aria-invalid را روی input بگذارید و aria-describedby را به idِ FieldError یا FieldDescription اشاره دهید تا صفحه‌خوان پیام را با فیلد بخواند.
• type و autocomplete درست را انتخاب کنید. type="email" به‌همراه autocomplete="email" صفحه‌کلید موبایل و autofill درست می‌گیرد.