InputGroup

Ne zaman kullanılır

InputGroup, metin denetiminin yanına anlamı tamamlayan bir ek gerektiğinde kullanılır: adres öneki ve soneki, birim, arama ikonu, temizleme ya da kopyalama işlemi, metin alanının altında araç satırı.

Ne zaman kullanılmaz

• Tek bir ikon ya da birim yetiyorsa: TextInput startContent ve endContent ile bunu verir.
• Birden çok işlem için: Eke en fazla bir küçük işlem koyun; daha fazlası için alanın dışında butonlar kullanın.
• Seçim için: Ekte açılır liste kullanmayın; ayrı bir seçim denetimi kullanın.

Anatomi

Alan etiketi

https://

.com

Yardım metni burada yer alır.

AçıkKoyu

Kodu kopyala

import { InputGroup } from '@bigbang/ui';

export default function Default() {
  return (
    <div className="max-w-96">
      <InputGroup label="Alan etiketi" description="Yardım metni burada yer alır.">
        <InputGroup.Addon>
          <InputGroup.Text>https://</InputGroup.Text>
        </InputGroup.Addon>
        <InputGroup.Input />
        <InputGroup.Addon align="inline-end">
          <InputGroup.Text>.com</InputGroup.Text>
        </InputGroup.Addon>
      </InputGroup>
    </div>
  );
}

1. Etiket: Field etiketi; gerektiğinde zorunluluk işareti.
2. Kutu: Denetimi ve ekleri saran tek kenarlık; odak ve hata kutuya uygulanır.
3. Ön ek: align="inline-start"; metin ya da süs ikonu.
4. Denetim: InputGroup.Input ya da InputGroup.Textarea.
5. Son ek: align="inline-end"; metin, birim ya da tek bir InputGroup.Button.
6. Blok ek: block-start ya da block-end; tam genişlikte satır.

Davranış

• Ekin yüzeyine tıklamak odağı denetime taşır; ekteki buton ve bağlantılar kendi işini yapar.
• Ekler DOM sırasından bağımsız olarak align ile yerleşir; ekran okuyucu DOM sırasını okur.
• Ön ve son ekler mantıksal yönlerle çizilir; sağdan sola metinde yer değiştirir.
• disabled denetimi ve etiketi kapatır, eklerin metnini soluklaştırır; ekteki butonu ayrıca kapatın.

Yönergeler

• Ek metnini kısa tutun: “https://”, “.com”, “adet”.
• Ekteki işlem için InputGroup.Button kullanın; yalnız ikonluya label verin.
• Ekleri DOM’da okunma sırasıyla yazın: önce ön ek, sonra denetim, sonra son ek.
• Ek metni etiketin yerini tutmaz; her grupta label verin.

İçerik

• Önek ve sonekler değerin parçası değildir; kullanıcıdan istemeyin.
• Birim metni küçük harfle ve kısaltmasız yazılır.

Türkçe	İngilizce
Temizle	Clear
Kopyala	Copy
adet	items

İlgili bileşenler

• TextInput: Basit ön ve son içerikli metin girdisi.
• Textarea: Ek gerektirmeyen çok satırlı metin.
• IconButton: Alan dışındaki ikon işlemleri; ek içinde InputGroup.Button kullanın.
• Field: Etiket, yardım metni ve hata bağlantısı.