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

Kurulum

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

TextInput, @bigbang/ui paketindedir. Kurulum ve stil dosyaları Button ile aynıdır; ayrıntılar için Button kod sekmesine bakın.

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

<TextInput label="Alan etiketi" name="field" />;

Özellikler

labelZorunlu

Açıklama: Alanın görünür etiketi. Girdiye <label> ile bağlanır; yer tutucu etiketin yerini tutmaz.
Tür: string

description

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

error

Açıklama: Verildiğinde alan geçersiz işaretlenir ve hata metni girdiyle birlikte, yardım metninden sonra okunur.
Tür: string

invalid

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

required

Açıklama: Değer zorunludur: girdiye required eklenir, etikete * ve görünmeyen "zorunlu" ya da "required" metni 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. Bir formda tek yöntem kullanın.
Tür: 'required' | 'optional'
Varsayılan: 'required'

size

Açıklama: Girdi yüksekliği: 32, 36 ve 40 px.
Tür: 'sm' | 'md' | 'lg'
Varsayılan: 'md'

startContent

Açıklama: Alan kutusunun içinde, girdiden önce gelen içerik: süs ikonu ya da para birimi, birim gibi kısa bir metin.
Tür: ReactNode

endContent

Açıklama: Alan kutusunun içinde, girdiden sonra gelen içerik: birim ya da kopyalama, gösterme gibi tek bir küçük işlem.
Tür: ReactNode

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 | number | readonly string[]

defaultValue

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

onValueChange

Açıklama: Değer her değiştiğinde çağrılır.
Tür: ((value: string, eventDetails: { reason: 'none'; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element; }) => void)

className

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

Bunların dışında yerel <input> öznitelikleri (type, placeholder, autoComplete, inputMode, maxLength) girdiye iletilir. ref, <input> öğesine bağlanır. className ise girdiye değil, etiket ve metinleri saran kök öğeye eklenir.

Veri öznitelikleri

Girdi, durumunu veri öznitelikleriyle bildirir; stil ve test seçicilerinde kullanılabilir.

Öznitelik	Ne zaman
`data-component="text-input"`	Kök öğede, her zaman.
`data-part`	Parçalarda: `label`, `necessity`, `box`, `start`, `control`, `end`, `description`, `error`.
`data-invalid`	`error` ya da `invalid` verildiğinde.
`data-required`	`required` verildiğinde (kök ve girdi).
`data-readonly`	`readOnly` verildiğinde (kök ve girdi).
`data-disabled`	Alan devre dışıyken.
`data-focused`	Alan odaktayken.
`data-filled`	Alanda değer varken.
`data-dirty`	Değer ilk değerinden farklıyken.
`data-touched`	Alan en az bir kez odak alıp bıraktıktan sonra.

Form kütüphaneleriyle

Doğrulama uygulamanın form katmanında yapılır; TextInput yalnızca hatayı gösterir. Form kütüphanesinin alan hatasını error’a, değerini value ve onValueChange’e bağlayın.

<TextInput
  label="Alan etiketi"
  name="field"
  value={field.value}
  onValueChange={field.onChange}
  onBlur={field.onBlur}
  error={fieldState.error?.message}
/>

Özel denetimler için Field

Field, TextInput’un kullandığı etiket, açıklama ve hata düzenini başka denetimlere açar. Kimlikleri, aria-describedby sırasını (önce açıklama, sonra hata), geçersiz ve devre dışı durumu kendisi bağlar. Varsayılan denetim Field.Control bir <input> çizer; kendi denetiminizi render ile verin. Tam serbest düzen için parçalar ayrı ayrı da kullanılabilir: Field.Root, Field.Label, Field.Control, Field.Description, Field.Error.

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

<Field label="Not" description="Ekip görebilir." necessityIndicator="optional">
  <Field.Control render={<textarea rows={3} />} />
</Field>