इनपुट

import {
  Field,
  FieldDescription,

इनपुट एक पंक्ति टेक्स्ट कैप्चर करता है — नाम, ईमेल, सर्च क्वेरी। यह Base UI Input कंपोनेंट पर बना है — नेटिव <input> पर पतला रैपर — और नियोब्रूटलिस्ट रेसिपी में: मोटा बॉर्डर, कठोर छाया, और हाई-कंट्रास्ट फ़ोकस आउटलाइन।

इसे इन स्थितियों में चुनें:

• ऑथ और साइनअप फ़ॉर्म — Field और FieldLabel के साथ ईमेल, यूज़रनेम, पासवर्ड फ़ील्ड।
• सर्च बार — Button के साथ इनलाइन, या InputGroup से आइकन के साथ।
• चेकआउट और सेटिंग्स पेज — 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 prop का उपयोग करें. अक्षम स्थिति को स्टाइल करने के लिए, Field कंपोनेंट में data-disabled एट्रिब्यूट जोड़ें.

import {
  Field,
  FieldDescription,

अमान्य#

इनपुट को अमान्य के रूप में चिह्नित करने के लिए aria-invalid prop का उपयोग करें. अमान्य स्थिति को स्टाइल करने के लिए, Field कंपोनेंट में data-invalid एट्रिब्यूट जोड़ें.

import {
  Field,
  FieldDescription,

फ़ाइल#

फ़ाइल इनपुट बनाने के लिए type="file" prop का उपयोग करें.

import {
  Field,
  FieldDescription,

इनलाइन#

इनलाइन इनपुट बनाने के लिए orientation="horizontal" के साथ Field का उपयोग करें. बटन के साथ सर्च इनपुट बनाने के लिए इसे 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#

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" सही मोबाइल कीबोर्ड और autofill देते हैं।