Bileşenler

Textarea

Açıklama, gerekçe ve not gibi çok satırlı metin girişi.

Storybook: Storybook
Kaynak kod: Kaynak kod

Kurulum

Paket: @bigbang/ui
İçe aktarma: import { Textarea } from '@bigbang/ui';
Kaynak: Textarea.tsx
Storybook: Textarea · Playground

Textarea, @bigbang/ui paketindedir.

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

<Textarea label="Alan etiketi" maxLength={500} showCount value={value} onValueChange={setValue} />;
<Textarea label="Alan etiketi" maxRows={5} />;

Özellikler

labelZorunlu

Açıklama: Metin alanına <label> ile bağlanan görünür etiket. Yer tutucu etiketin yerini tutmaz.
Tür: string

description

Açıklama: Alanın altındaki yardım metni; aria-describedby ile hatadan önce bağlanır.
Tür: ReactNode

error

Açıklama: Verildiğinde alan geçersiz olur ve mesaj metin alanıyla okunur. Birden çok mesaj için liste verin.
Tür: string | readonly string[]

invalid

Açıklama: Alanı mesaj olmadan geçersiz işaretler; örneğin mesaj bir hata özetindeyse.
Tür: boolean
Varsayılan: false

required

Açıklama: Değer zorunludur: metin alanına required, etikete * ve görünmeyen "zorunlu" ya da "required" eklenir.
Tür: boolean
Varsayılan: false

necessityIndicator

Açıklama: Formun hangi alanları işaretlediği: required zorunlu alanları, optional diğerlerini "(isteğe bağlı)" ya da "(optional)" ile işaretler.
Tür: 'required' | 'optional'
Varsayılan: 'required'

rows

Açıklama: Kullanıcı yazmadan önce görünen satır sayısı; en küçük yükseklik.
Tür: number
Varsayılan: 3

autoResize

Açıklama: Kaydırmak yerine içerikle birlikte maxRows satıra kadar uzar ve boyutlandırma tutamacını gizler.
Tür: boolean
Varsayılan: true

maxRows

Açıklama: autoResize için satır sınırı; ötesinde metin alanı kayar.
Tür: number
Varsayılan: 8

maxLength

Açıklama: Karakter sınırı. showCount ile sayaç gösterir, sınır aşılınca alan tehlike rengine geçer; yazma engellenmez.
Tür: number

showCount

Açıklama: Alanın altında karakter sayacını gösterir. maxLength gerekir.
Tür: boolean
Varsayılan: false

placeholder

Açıklama: Boş metin alanındaki kısa örnek metin. Etiket değildir.
Tür: string

readOnly

Açıklama: Değer okunabilir, odak alır, kopyalanabilir ve formla gönderilir ama değiştirilemez.
Tür: boolean
Varsayılan: false

disabled

Açıklama: Alanı ve etiketini devre dışı bırakır; değer forma gönderilmez.
Tür: boolean
Varsayılan: false

name

Açıklama: Form gönderiminde kullanılan alan adı.
Tür: string

value

Açıklama: Kontrollü değer. onValueChange ile birlikte verin.
Tür: string

defaultValue

Açıklama: Alan kontrolsüz kullanıldığında başlangıç değeri.
Tür: string

onValueChange

Açıklama: Değer her değiştiğinde yeni metinle çağrılır.
Tür: (value: string) => void

className

Açıklama: Kök öğeye eklenir; yalnızca yerleşim için kullanın.
Tür: string

Veri öznitelikleri

data-component="textarea": kök öğe üzerinde.
data-part: label, control, counter, description, error.
data-invalid, data-disabled, data-required, data-readonly: kök öğe üzerinde.