Bileşenler

TextInput

Kullanıcının tek satırlık bir metin ya da sayı girmesini sağlar; etiket, yardım metni ve hata mesajı alana bağlı gelir.

Storybook: Storybook
Kaynak kod: Kaynak kod

Aşağıdaki örnek Storybook’tan canlı yüklenir; denetimleri Storybook’ta açabilirsiniz.

Canlı örnek, StorybookStorybook'ta aç

Varsayılan

TextInput her zaman görünür bir etiketle gelir; etiket girdiye bağlıdır, etikete tıklamak alana odaklanır. Varsayılan boy orta boydur (36 px).

Alan etiketi

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

export default function Default() {
  return <TextInput label="Alan etiketi" name="field" className="w-full max-w-80" />;
}

Yardım metni

description, alanın ne beklediğini etiketin söyleyemediği ayrıntıyla anlatır: biçim, uzunluk, nereden bulunacağı. Ekran okuyucu bu metni alanla birlikte okur.

Alan etiketi

Yardım veya açıklama metni burada yer alır

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

export default function WithDescription() {
  return (
    <TextInput
      label="Alan etiketi"
      description="Yardım veya açıklama metni burada yer alır"
      name="field"
      className="w-full max-w-80"
    />
  );
}

Hata

error verildiğinde alan geçersiz işaretlenir: kenarlık tehlike rengine geçer, hata metni yardım metninin altında görünür ve ekran okuyucu onu alanla birlikte okur. Hata metni neyin yanlış olduğunu ve nasıl düzeltileceğini söyler. Mesaj başka bir yerde, örneğin formun başındaki hata özetinde gösteriliyorsa yalnızca invalid verin: alan, altında mesaj olmadan geçersiz işaretlenir.

Alan etiketi

Hata mesajı burada yer alır

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

export default function Invalid() {
  return (
    <TextInput
      label="Alan etiketi"
      error="Hata mesajı burada yer alır"
      name="field"
      defaultValue="Değer"
      className="w-full max-w-80"
    />
  );
}

Zorunlu ve isteğe bağlı

required değeri zorunlu kılar: girdiye yerel required özniteliği eklenir, böylece ekran okuyucu “zorunlu” der; etikete * ve görünmeyen bir “zorunlu” metni eklenir. Bir form azınlıktaki alanları işaretler: alanların çoğu zorunluysa her alana necessityIndicator="optional" verin, zorunlu olmayanlar “(isteğe bağlı)” ile işaretlenir. Bir formda tek bir yöntem kullanın. İşaret metni kütüphanenin metin kataloğundan, Provider dilinde gelir.

Alan etiketi

Not(isteğe bağlı)

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

export default function Necessity() {
  return (
    <>
      <TextInput label="Alan etiketi" name="required-field" required className="w-full max-w-80" />
      <TextInput label="Not" name="optional-field" necessityIndicator="optional" className="w-full max-w-80" />
    </>
  );
}

Başta ve sonda içerik

startContent ve endContent, girdinin önüne ve arkasına, alan kutusunun içine içerik yerleştirir: süs ikonu, para birimi ya da birim, ya da kopyalama gibi tek bir küçük işlem. Yalnızca süs olan içerik ekran okuyucudan gizlenir; anlam taşıyan birim etikette ya da yardım metninde de yer almalıdır.

Miktar

adet

Alan etiketi

import { Icon, TextInput } from '@bigbang/ui';

export default function StartEndContent() {
  return (
    <>
      <TextInput label="Miktar" name="quantity" inputMode="numeric" endContent="adet" className="w-full max-w-80" />
      <TextInput label="Alan etiketi" name="search" startContent={<Icon name="search" size="sm" />} className="w-full max-w-80" />
    </>
  );
}

Salt okunur

readOnly alan, burada değiştirilemeyen bir değeri gösterir. Devre dışı alanın aksine odak alır, metni seçilip kopyalanabilir ve değeri formla gönderilir.

Referans numarası

Değer kopyalanabilir ama değiştirilemez.

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

export default function ReadOnly() {
  return (
    <TextInput
      label="Referans numarası"
      description="Değer kopyalanabilir ama değiştirilemez."
      name="reference"
      defaultValue="Değer"
      readOnly
      className="w-full max-w-80"
    />
  );
}

Boyutlar

İki boyut vardır. Boyut seçimi yoğunluğa ve cihaza göre yapılır.

Orta (md, 36 px): Masaüstü formlar ve filtre alanları dahil çoğu yer.
Büyük (lg, 40 px): Mobil formlar. Aynı formdaki Button da büyük boyda olmalı.

Orta

Büyük

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

export default function Sizes() {
  return (
    <div className="flex w-full max-w-80 flex-col gap-xl">
      <TextInput label="Orta" size="md" name="field-md" />
      <TextInput label="Büyük" size="lg" name="field-lg" />
    </div>
  );
}

Devre dışı

Devre dışı alan düzenlenemez, odak almaz ve değeri forma gönderilmez. Kullanıcının değiştiremeyeceği ama görmesi gereken bir bilgi için kullanın ve nedenini yardım metninde yazın.

Alan etiketi

Yardım veya açıklama metni burada yer alır

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

export default function Disabled() {
  return <TextInput label="Alan etiketi" description="Yardım veya açıklama metni burada yer alır" defaultValue="Değer" disabled className="w-full max-w-80" />;
}

Kontrollü kullanım

Değeri yazarken biçimlendirmek ya da başka bir alana bağlamak için value ve onValueChange birlikte verilir. Bu örnek girilen karakter sayısını yardım metninde gösterir.

Alan etiketi

0/20 karakter

import { TextInput } from '@bigbang/ui';
import { useState } from 'react';

const MAX_LENGTH = 20;

export default function Controlled() {
  const [value, setValue] = useState('');
  return (
    <TextInput
      label="Alan etiketi"
      description={`${value.length}/${MAX_LENGTH} karakter`}
      name="field"
      value={value}
      onValueChange={setValue}
      maxLength={MAX_LENGTH}
      className="w-full max-w-96"
    />
  );
}

Açık ve koyu mod

TextInput tüm renklerini anlamsal token’lardan alır; açık ve koyu modda ayrı bir ayar gerekmez.

Alan etiketi

Hata mesajı burada yer alır

Alan etiketi

Hata mesajı burada yer alır

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

export default function Invalid() {
  return (
    <TextInput
      label="Alan etiketi"
      error="Hata mesajı burada yer alır"
      name="field"
      defaultValue="Değer"
      className="w-full max-w-80"
    />
  );
}