Giriş

import {
  Field,
  FieldDescription,

Input, tek satırlık metin girişi alır — adlar, e-postalar, arama sorguları. Yerel <input> öğesinin üzerindeki ince bir sarmalayıcı olan Base UI Input bileşeni üzerine kuruludur ve neobrütalist reçeteyle giydirilmiştir: kalın kenarlık, keskin gölge ve yüksek kontrastlı odak çerçevesi.

Şu durumlarda tercih edin:

• Oturum açma ve kayıt formları — Field ve FieldLabel ile eşleştirilmiş e-posta, kullanıcı adı ve parola alanları.
• Arama çubukları — bir Button ile yan yana ya da InputGroup aracılığıyla simgelerle birlikte.
• Ödeme ve ayar sayfaları — bir FieldGroup içinde düzenlenmiş adresler, kart numaraları ve profil alanları.

Kurulum#

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
Kopyala

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 }

Kullanım#

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

Kopyala<Input />

Örnekler#

Temel#

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

export function InputBasic() {

Field#

Etiket ve açıklama içeren bir giriş oluşturmak için Field, FieldLabel ve FieldDescription bileşenlerini kullanın.

import {
  Field,
  FieldDescription,

Field Group#

Birden fazla Field bloğu göstermek ve formlar oluşturmak için FieldGroup kullanın.

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

Devre Dışı#

Girişi devre dışı bırakmak için disabled prop'unu kullanın. Devre dışı durumunu biçimlendirmek için Field bileşenine data-disabled özniteliğini ekleyin.

import {
  Field,
  FieldDescription,

Geçersiz#

Girişi geçersiz olarak işaretlemek için aria-invalid prop'unu kullanın. Geçersiz durumunu biçimlendirmek için Field bileşenine data-invalid özniteliğini ekleyin.

import {
  Field,
  FieldDescription,

Dosya#

Bir dosya girişi oluşturmak için type="file" prop'unu kullanın.

import {
  Field,
  FieldDescription,

Satır İçi#

Satır içi bir giriş oluşturmak için Field'i orientation="horizontal" ile kullanın. Bir düğmeli arama girişi oluşturmak için Button ile birleştirin.

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

Izgara#

Birden fazla girişi yan yana yerleştirmek için ızgara düzeni kullanın.

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

Zorunlu#

Zorunlu girişleri belirtmek için required özniteliğini kullanın.

import {
  Field,
  FieldDescription,

Badge#

Önerilen bir alanı vurgulamak için etikette Badge kullanın.

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

Input Group#

Bir girişin içine simge, metin veya düğme eklemek için InputGroup bileşenini kullanın. Daha fazla örnek için Input Group bileşenine bakın.

import { InfoIcon } from "lucide-react"

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

Button Group#

Bir girişe düğme eklemek için ButtonGroup bileşenini kullanın. Daha fazla örnek için Button Group bileşenine bakın.

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

Form#

Birden fazla giriş, bir select ve bir düğme içeren tam bir form örneği.

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

RTL#

Neobrutalism'de RTL desteğini etkinleştirmek için RTL yapılandırma kılavuzuna bakın.

"use client"

import * as React from "react"

Erişilebilirlik#

Input, yerel bir <input> işler; bu yüzden klavyeyle düzenleme, odak ve form gönderimi için ARIA bağlantısı gerekmez. Geriye kalanlar size düşer:

• Her giriş alanını etiketleyin. FieldLabel (veya bir <label htmlFor>) ile eşleştirin — placeholder bir etiket değildir; yazmaya başlayınca kaybolur ve güvenilir biçimde duyurulmaz.
• Hata metnini ilişkilendirin. Giriş alanına aria-invalid ekleyin ve ekran okuyucuların mesajı alanla birlikte okuması için aria-describedby özniteliğini FieldError veya FieldDescription bileşeninizin id'sine yönlendirin.
• Doğru type ve autocomplete değerlerini seçin. type="email" ile autocomplete="email" birlikte doğru mobil klavyeyi ve otomatik doldurmayı getirir.