קלט

import {
  Field,
  FieldDescription,

ה-input קולט שורת טקסט אחת — שמות, אימיילים, שאילתות חיפוש. נבנה על גבי רכיב Base UI Input, עטיפה דקה מעל ה-<input> המקורי, ולבוש במתכון הנאו-ברוטליסטי: מסגרת עבה, צל חד וקו מתאר פוקוס בניגודיות גבוהה.

השתמשו בו כש:

• טפסי אימות והרשמה — שדות אימייל, שם משתמש וסיסמה יחד עם 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#

השתמשו ב-FieldGroup כדי להציג כמה בלוקים של Field ולבנות טפסים.

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

מושבת#

השתמשו ב-prop בשם disabled כדי להשבית את שדה הקלט. לעיצוב המצב המושבת, הוסיפו את המאפיין data-disabled לרכיב Field.

import {
  Field,
  FieldDescription,

לא תקין#

השתמשו ב-prop בשם aria-invalid כדי לסמן את שדה הקלט כלא תקין. לעיצוב המצב הלא תקין, הוסיפו את המאפיין data-invalid לרכיב Field.

import {
  Field,
  FieldDescription,

קובץ#

השתמשו ב-prop בשם 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. מה שנשאר עליכם:

• תנו לייבל לכל input. חברו אותו ל-FieldLabel (או ל-<label htmlFor>) — placeholder אינו לייבל; הוא נעלם בהקלדה ולא מוכרז באמינות.
• קשרו טקסט שגיאה. הגדירו aria-invalid על ה-input והפנו aria-describedby ל-id של FieldError או FieldDescription שלכם כדי שקוראי מסך יקראו את ההודעה עם השדה.
• בחרו את ה-type וה-autocomplete הנכונים. type="email" ועוד autocomplete="email" מקבלים את מקלדת המובייל הנכונה ומילוי אוטומטי.