إدخال

حقل نصي من سطر واحد مخصص لعمليات تسجيل الدخول وأشرطة البحث ونماذج إتمام الدفع — مع تطبيق أسلوب «النيوبروتاليزم» الذي يتميز بالحدود السميكة والظلال الحادة.

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 لتعطيل حقل الإدخال. لتنسيق الحالة المعطّلة، أضف السمة 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> الأصلي، لذا لا تحتاج عمليات التحرير باستخدام لوحة المفاتيح، والتركيز، وإرسال النماذج إلى أي تكوين ARIA. أما ما تبقى فهو من مسؤوليتك:

تسمية كل حقل إدخال. قم بإقرانه بـ FieldLabel (أو <label htmlFor>) — حيث إن placeholder ليس تسمية؛ فهو يختفي عند الكتابة ولا يتم الإعلان عنه بشكل موثوق.
اربط نص الخطأ. اضبط aria-invalid على حقل الإدخال ووجه aria-describedby إلى معرّف FieldError أو FieldDescription الخاص بك حتى تقرأ برامج قراءة الشاشة الرسالة مع الحقل.
اختر type و autocomplete المناسبين. يؤدي استخدام type="email" مع autocomplete="email" إلى تفعيل لوحة مفاتيح الجوال الصحيحة وميزة الملء التلقائي.