Bileşenler

Field

Her form denetimi için etiket, denetim, yardım metni, hata ve sayacı kimliklerle bağlayan kap.

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

Field, etiketi <label> ile denetime, yardım metnini aria-describedby ile bağlar. Yalın Field.Control, TextInput görünümünde bir <input> çizer.

Alan etiketi

Yardım metni burada yer alır.

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

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

Zorunlu ve isteğe bağlı

required etikete * ve görünmeyen “zorunlu” ekler. necessityIndicator="optional" zorunlu olmayan alanlara “(isteğe bağlı)” yazar.

Alan etiketi

Alan etiketi(isteğe bağlı)

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

export default function Necessity() {
  return (
    <>
      <div className="flex max-w-80 flex-col gap-lg">
        <Field label="Alan etiketi" required>
          <Field.Control required />
        </Field>
        <Field label="Alan etiketi" necessityIndicator="optional">
          <Field.Control />
        </Field>
      </div>
    </>
  );
}

Hata mesajları

error alanı geçersiz yapar. Birden çok mesaj için liste verin; mesajlar madde listesi olarak çizilir ve denetime bağlanır.

Alan etiketi

Bu alan boş bırakılamaz.

Alan etiketi

Yardım metni burada yer alır.

Bu alan boş bırakılamaz.
En az 3 karakter girin.

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

export default function Errors() {
  return (
    <div className="flex max-w-80 flex-col gap-lg">
      <Field label="Alan etiketi" error="Bu alan boş bırakılamaz.">
        <Field.Control />
      </Field>
      <Field label="Alan etiketi" description="Yardım metni burada yer alır." error={['Bu alan boş bırakılamaz.', 'En az 3 karakter girin.']}>
        <Field.Control />
      </Field>
    </div>
  );
}

Karakter sayacı

Field.Counter kullanılan karakteri sınırla gösterir. Sınırın %80’inden sonra kalan karakter kibarca duyurulur; sınır aşılınca sayaç tehlike rengine geçer.

Alan etiketi

Yardım metni burada yer alır.

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

export default function Counter() {
  const [value, setValue] = useState('');
  return (
    <>
      <div className="max-w-80">
        <Field label="Alan etiketi" description="Yardım metni burada yer alır.">
          <Field.Control value={value} onValueChange={setValue} />
          <Field.Counter value={value} max={20} />
        </Field>
      </div>
    </>
  );
}

Açık ve koyu mod

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

Alan etiketi

Bu alan boş bırakılamaz.

Alan etiketi

Yardım metni burada yer alır.

Bu alan boş bırakılamaz.
En az 3 karakter girin.

Alan etiketi

Bu alan boş bırakılamaz.

Alan etiketi

Yardım metni burada yer alır.

Bu alan boş bırakılamaz.
En az 3 karakter girin.

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

export default function Errors() {
  return (
    <div className="flex max-w-80 flex-col gap-lg">
      <Field label="Alan etiketi" error="Bu alan boş bırakılamaz.">
        <Field.Control />
      </Field>
      <Field label="Alan etiketi" description="Yardım metni burada yer alır." error={['Bu alan boş bırakılamaz.', 'En az 3 karakter girin.']}>
        <Field.Control />
      </Field>
    </div>
  );
}