Field

Kurulum

Paket

@bigbang/ui

İçe aktarma

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

Kaynak

Field.tsx

Storybook

Field · Playground

Field, @bigbang/ui paketindedir.

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

<Field label="Alan etiketi" description="Yardım metni burada yer alır." error={errors}>
  <Field.Control value={value} onValueChange={setValue} />
  <Field.Counter value={value} max={20} />
</Field>;

Parça prop tipleri de dışa açılır: FieldRootProps, FieldLabelProps, FieldControlProps, FieldDescriptionProps, FieldErrorProps, FieldCounterProps, FieldLegendProps.

Özellikler

required

Açıklama

Değer zorunludur: denetime required ve aria-required eklenir; necessityIndicator required ise etiket işaretlenir.

Tür

boolean

Varsayılan

false

necessityIndicator

Açıklama

Formun hangi alanları işaretlediği. required, zorunlu alanlara * ve görünmeyen "zorunlu" ya da "required" ekler; optional diğer alanlara "(isteğe bağlı)" ya da "(optional)" ekler. Bir form tek yöntem kullanır: azınlığı işaretleyin.

Tür

'optional' | 'required'

Varsayılan

'required'

labelZorunlu

Açıklama

Denetime <label> ile bağlanan görünür etiket. Yer tutucu etiketin yerini tutmaz.

Tür

string

description

Açıklama

Denetimin 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 denetimle birlikte okunur. Birden çok mesaj için liste verin; boş liste ya da boş metin alanı geçerli bırakır.

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

disabled

Açıklama

Alanı ve etiketini devre dışı bırakır; değer forma gönderilmez.

Tür

boolean

Varsayılan

false

readOnly

Açıklama

Stil için alana data-readonly olarak yazılır; readOnly özniteliğini denetimin kendisine verin.

Tür

boolean

Varsayılan

false

name

Açıklama

Form gönderiminde kullanılan alan adı.

Tür

string

className

Açıklama

Kök öğeye eklenir; yalnızca yerleşim için kullanın.

Tür

string

childrenZorunlu

Açıklama

Denetim; genellikle Field.Control ya da bir kütüphane denetiminin kendi parçaları.

Tür

ReactNode

Parçalar

• Field.Root, Field.Label, Field.Description, Field.Error: kendi düzeninizi kurmak için.
• Field.Control: TextInput görünümünde <input>; render ile kendi denetiminizi bağlayın, className görünümü değiştirir.
• Field.Counter: value (metin) ve max (sayı) alır.
• Field.Set: ilişkili alanları saran <fieldset>; alanlar arası 16 px (CheckboxGroup ya da RadioGroup çevresinde 12 px); adını Field.Legend verir.
• Field.Legend: variant legend (16 px orta kalınlık, text.label-lg) ya da label (14 px, text.label-md); altında 6 px.
• Field.Group: alanlar arası 20 px bir sütun; grup içindeki grup 16 px kullanır.
• Field.Separator: formun bölümleri arasında 1 px color-border-subtle çizgi; isteğe bağlı ortada “ya da” gibi metin.

Veri öznitelikleri

• data-component="field": kök öğe üzerinde.
• data-part: label, control, description, error, counter, necessity, field-set, field-legend, field-group, field-separator.
• data-state (sayaç): under, near, over.
• data-required, data-readonly, data-invalid, data-disabled: kök öğe üzerinde.