Input

Tek satırlık bir metin input'u. Bir Field içinde id'sini, açıklamasını, hatasını ve zorunluluk state'ini otomatik olarak alır.

KararlıKaynak kod

<Input aria-label="E-posta" type="email" placeholder="sen@sirket.com" />

Import

tsx

import { Input } from "@merid/react";

Örnekler

Boyutlar

sm 36px, md 46px (varsayılan), lg 50px.

<Input size="sm" placeholder="Küçük, 36px" />
<Input size="md" placeholder="Orta, 46px" />
<Input size="lg" placeholder="Büyük, 50px" />

leading ve trailing, çerçevenin içine dekoratif ikonlar, önekler ya da birimler ekler. Bunlar aria-hidden'dır; anlamlı olan her şeyi (örneğin para birimini) etikette de belirt. İkisinden biri verildiğinde input .mrd-input-group ile sarılır ve className bu sarmalayıcıya geçer.

<Input aria-label="Ara" leading={<SearchIcon />} placeholder="Projelerde ara" />
<Input aria-label="Tutar" type="number" trailing="TRY" defaultValue="250" />

Geçersiz, devre dışı, salt okunur

invalid, geçersiz stilini ve aria-invalid'i zorlar; Field içinde Field'ın error'unu izler. disabled ve readOnly native attribute'lardır.

<Input aria-label="Geçersiz" invalid defaultValue="e-posta-degil" />
<Input aria-label="Devre dışı" disabled defaultValue="Devre dışı" />
<Input aria-label="Salt okunur" readOnly defaultValue="Salt okunur" />

Controlled

Input sade bir <input>'tur: kontrol etmek için value + onChange, uncontrolled bırakmak için defaultValue kullan.

meridui.dev/…

const [value, setValue] = useState("");

<Input
aria-label="Çalışma alanı URL'si"
value={value}
onChange={(event) => setValue(event.target.value)}
placeholder="acme"
/>
<Text size="xs" tone="muted">meridui.dev/{value || "…"}</Text>

API referansı

Input ref'ini <input>'a iletir ve diğer tüm native input attribute'larını olduğu gibi geçirir. className ve style her zaman kök elemana gider: <input>'un kendisine ya da leading veya trailing verildiğinde .mrd-input-group sarmalayıcısına. type varsayılan olarak "text"'tir.

Prop	Tip	Varsayılan	Açıklama
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Yükseklik: sm 36px, md 46px, lg 50px.
`invalid`	`boolean`	–	Geçersiz stilini (`data-invalid`) ve `aria-invalid`'i zorlar. Field içinde onun hatasından türetilir.
`leading`	`ReactNode`	–	Metinden önceki dekoratif eleman (ikon, önek).
`trailing`	`ReactNode`	–	Metinden sonraki dekoratif eleman (ikon, birim).
`type`	`string`	`"text"`	Native input tipi.

Stil verme

Seçici	Değerler
`.mrd-input`	<input> elemanı
`.mrd-input-group`	Sarmalayıcı, yalnızca `leading` ya da `trailing` verildiğinde
`.mrd-input-group__addon`	Ek slot'u, `data-side` ile: `leading` · `trailing`
`data-size`	`sm` · `md` · `lg` (input ve group üzerinde)
`data-invalid`	Geçersizken bulunur; danger kenarlığını yönetir (semantiği `aria-invalid` taşır)

Component değişkeni: --mrd-input-height, boyuta göre atanır.

css

.filters .mrd-input {
  --mrd-input-height: 40px;
}

Erişilebilirlik

Her input'un bir adı olmalı: görünür bir Label / Field ya da amacı bağlamdan belli olduğunda (arama gibi) aria-label.
Placeholder bir etiket değildir; yazmaya başlayınca kaybolur ve kontrastı düşüktür.

Tuş	Ne yapar
`Tab`	Focus'u input'a taşır.

Kullanım ilkeleri

Yap

Bir satır tek yükseklikte kalsın diye input size'ını komşu butonlarla eşleştir.

Kaçın

leading ya da trailing içine buton gibi etkileşimli elemanlar koymak. Ekler yardımcı teknolojiden gizlenir.

İlgili sayfalar

Field: etiket, açıklama ve hata bağlantısı.
Textarea: çok satırlı metin.
NativeSelect: listeden seçim.