InputGroup

Kurulum

Paket

@bigbang/ui

İçe aktarma

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

Kaynak

InputGroup.tsx

Storybook

InputGroup · Playground

InputGroup, @bigbang/ui paketindedir.

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

<InputGroup label="Alan etiketi">
  <InputGroup.Addon>
    <InputGroup.Text>https://</InputGroup.Text>
  </InputGroup.Addon>
  <InputGroup.Input value={value} onValueChange={setValue} />
</InputGroup>;

Parça prop tipleri de dışa açılır: InputGroupAddonProps, InputGroupInputProps, InputGroupTextareaProps, InputGroupTextProps, InputGroupButtonProps.

Özellikler

labelZorunlu

Açıklama

Girdiye ya da metin alanına <label> ile bağlanan görünür etiket. Yer tutucu etiketin yerini tutmaz.

Tür

string

description

Açıklama

Grubun altındaki yardım metni; aria-describedby ile hatadan önce bağlanır.

Tür

ReactNode

error

Açıklama

Verildiğinde grup geçersiz olur ve mesaj denetimle birlikte okunur.

Tür

string

invalid

Açıklama

Grubu mesaj olmadan geçersiz işaretler; örneğin mesaj bir hata özetindeyse.

Tür

boolean

Varsayılan

false

required

Açıklama

Değer zorunludur: etikete * ve görünmeyen "zorunlu" ya da "required" eklenir. Girdiye de required verin.

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'

size

Açıklama

Girdi satırının yüksekliği: TextInput gibi 32, 36 ya da 40 px.

Tür

'sm' | 'md' | 'lg'

Varsayılan

'md'

disabled

Açıklama

Denetimi, eklerin görünümünü ve etiketi devre dışı bırakır; değer gönderilmez.

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

Bir InputGroup.Input ya da InputGroup.Textarea ve istenen sırada InputGroup.Addon parçaları; yerlerini align belirler.

Tür

ReactNode

Parçalar

• InputGroup.Input: Base UI Input; value, defaultValue, onValueChange, required, inputMode gibi öznitelikleri alır.
• InputGroup.Textarea: rows, placeholder, value, defaultValue, onValueChange alır; rows satırdan başlayıp içerikle büyür.
• InputGroup.Addon: align (inline-start varsayılan, inline-end, block-start, block-end) ve blok ekle denetim arasına çizgi için divider.
• InputGroup.Text: ek metni.
• InputGroup.Button: 24 px’lik küçük, dolgusuz buton; metin için children (isteğe bağlı icon ile) ya da Tooltip’li yalnız ikonlu buton için icon ve label. onClick ve disabled alır.

Veri öznitelikleri

• data-component="input-group": kök öğe üzerinde.
• data-part: box, addon, control, button.
• data-align: ek üzerinde.