Bileşenler

Textarea

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

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

Textarea üç satır yüksekliğinde (rows) başlar ve içerikle birlikte maxRows satıra kadar büyür. Etiket, yardım metni ve hata Field ile bağlanır.

Alan etiketi

Yardım metni burada yer alır.

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

export default function Default() {
  return (
    <div className="max-w-96">
      <Textarea label="Alan etiketi" description="Yardım metni burada yer alır." />
    </div>
  );
}

Karakter sayacı

maxLength ve showCount sayacı açar. Sınırın %80’inden sonra kalan karakter kibarca duyurulur; sınır aşılınca alan geçersiz olur. Yazma engellenmez.

Alan etiketi

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

export default function Counter() {
  const [value, setValue] = useState('');
  return (
    <>
      <div className="max-w-96">
        <Textarea label="Alan etiketi" maxLength={40} showCount value={value} onValueChange={setValue} />
      </div>
    </>
  );
}

Otomatik büyüme

Varsayılan olarak (autoResize) alan içerikle birlikte rows satırdan maxRows satıra kadar uzar; sonra kayar ve boyutlandırma tutamacı yoktur. Kullanıcının dikey boyutlandırabildiği sabit yükseklik için autoResize={false} verin.

Alan etiketi

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

export default function AutoResize() {
  return (
    <div className="max-w-96">
      <Textarea label="Alan etiketi" rows={2} autoResize maxRows={5} />
    </div>
  );
}

Durumlar

Zorunlu ve hatalı, salt okunur ve devre dışı alanlar.

Alan etiketi

Bu alan boş bırakılamaz.

Alan etiketi

Metin örneği

Alan etiketi

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

export default function States() {
  return (
    <>
      <div className="flex max-w-96 flex-col gap-lg">
        <Textarea label="Alan etiketi" required error="Bu alan boş bırakılamaz." />
        <Textarea label="Alan etiketi" defaultValue="Metin örneği" readOnly />
        <Textarea label="Alan etiketi" defaultValue="Metin örneği" disabled />
      </div>
    </>
  );
}

Açık ve koyu mod

Renkler color-border-*, color-surface-* ve color-text-* token’larından gelir.

Alan etiketi

Bu alan boş bırakılamaz.

Alan etiketi

Metin örneği

Alan etiketi

Bu alan boş bırakılamaz.

Alan etiketi

Metin örneği

Alan etiketi

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

export default function States() {
  return (
    <>
      <div className="flex max-w-96 flex-col gap-lg">
        <Textarea label="Alan etiketi" required error="Bu alan boş bırakılamaz." />
        <Textarea label="Alan etiketi" defaultValue="Metin örneği" readOnly />
        <Textarea label="Alan etiketi" defaultValue="Metin örneği" disabled />
      </div>
    </>
  );
}